Movin' on up
Another day, another update. This is the big one I've been working towards for a while. I just got it set up to display examples of the raw code from the snippets. The Repository page has been restructured in a way that lets you view the code or the example. It's a little rough right now because I just got it working, and I want to mess with the styling a little bit.
But this is probably going to be the last big update for a bit code-wise, I've got a bunch of other work coming up that I need to put some time into which is kinda sad because this was just starting to take off again (finally), but oh well.
Well, that's not entirely true, I think I may have an image upload script using AJAX to toss up because I've gotta build one for Fun in ideally the next week (hoping to have the static template done this week so I can get back into rebuilding all the scripts for that). Oh, and I may go and rebuild the current slider (Display Slider) and add another one that fades front-to-back. And a few changes to the Display Slider that let you navigate between panels manually. And I'm getting ahead of myself again. Meh.
Anyway, check the new Repo page out, now that it's up and (mostly) working 100% I can focus more on getting developed code posted.
Cheers.
Unpacking an array, AJAX formData to PHP
Alright, so I finally got the repository up and working. It's using the same structure as the other blogs, but I want it to display things a little differently; that'll be a task for another day, however. But I wanted to post this today.
I was doing some maintenance the other day on a script I built a while back (like, the second really big site I ever built) and I came across a horribly awful line of code.
Basically, when I built it I wasn't sure how to pass the data, and I tried a bunch of things and went with the first one that successfully passed between 36 and 80 key and value pairs.
Well, I finally got around to fixing it because the problem I've been having is that the way it was originally set up it ended up escaping a bunch of characters like @ into @ which basically meant that for every special character, I had a str_replace. Yeah. Giant mess.
So anyway, I finally put together this little line that saves my life and sanity:
Javascript/jQuery to send the form data:
PHP site that breaks it apart:
So whenever I have an input field with the name "rabble" and the value of "!@#$%^&*()" it comes out on the other side perfectly as:
rabble => !@#$%^&*()
I do a little extra validation on the server side (confirm userid/admin status, etc) for permissions, and then allow the user to send the data.
It's a pretty handy little script and definitely faster and cleaner than the mess it used to be.
It's alive!
Okay, so I got the code posting section about 90% done. There's a script running clientside, and on load it ajaxes in the data based on the id of the code snippet.
Honestly, I don't think that's the BEST way to do it, but I'd like to link the code snippets in other places, reference and edit them while posting the code blogs, and there's a slight delay on load for the user, which isn't ideal. But for something I conceptualized in 30 minutes, hacked together in an hour, and debugged in another hour, it works fairly well. For now i'm just going to keep copy/pasting the code snippets into the database, which is a slight hassle.
Oh, so that remaining 10% I have left to do is add another panel to the admin panel when creating code so that I can copy/paste it into the interface and it'll give me the id to post, which will fix that.
I've also gotta see about getting something specific for a code example, because I deleted that...oops.
So once I get that whole thing working the easy part is just the whole thing that handles my image upload/resize thing for the galleries.
No code for this post though, because I need to get working on some other things and it's mid-to-late Sunday.
Regex ALL the inputs!
Alright, so what was initially supposed to be a quick rebuild of my site has already transformed. I've already got some great, grand vision that's going to take a huge amount of time and hopefully look/be pretty awesome.
While I'm doing that I need to at least get a few of this code snippets in here so that I can see what kind of functionality I'll need to include in the backend so I can make the front end work the way I want it to.
I set up the HTML of the contact page last night, which looks like this:
However, this is fairly basic code that basically just handles the HTML side of this. A quick note though, I've started using textareas for input by default now. It takes a few extra lines of CSS to get them styled to appear like normal text/password inputs but the amount of hassle that's saved over dealing with 's and "s when filling in data (compared to using a text inputs value field) is just huge.
Anyway, so that's that part done, but now I need to validate the input client-side to make sure everything is good and dandy, so I'm going to switch to some jQuery:
Okay, so I've got my standard document ready keybind so that on any keyup inside the indicated box, it runs the script, which passes it through a regex set up to detect emails. If the input matches the regex, it's happy. If it doesn't match the regex, it's unhappy and applies id="error" to the box, which in my case applies a red outline around the textarea instead of the normal blue.
There's a couple nice things about this setup:
- because of the way it applies the css styling, the red box remains until corrected; later I'm thinking about including some sort of feedback to let the user know specifically what is wrong (too long? improper characters? spaces?)
- the element that the keyup function is applied to can be used multiple times, so if I have, say, a login form that uses email addresses, I can add textarea[name=userEmail] to the list of bound elements instead of writing a new function
- the elements class is being used for styling, the id is being used for element-specific styling, and the name is being used for targeting and data field, which I believe is the proper way it should be structured (note: my opinion, no hatemail please)
- the regex itself is it's own function, so the call to test it can come from a keystroke in the box or it could come from another area like a validation script, or from just calling it to display an example.
Edit Sept 28, 2013 - Edited the second example because I copied/pasted the wrong function for what the first part of the script was calling, and I'm making some changes to the way the site handles the code, so I'll provide a link to a working example once I get the example page up.