Web Development on Windows

As I've mentioned before, I've gotten spoiled as a Purdue student. Since we're provided with webspace on a root server that we can map to Windows as a networked drive, I can just edit files in a seemingly local folder. It makes for easy updating.

Since I'm no longer at Purdue, I have to use a VPN to gain access to this networked drive. This still works, but it's incredibly slow. Think 2KB/s speed. Slow to the point of being really unusable. Really the only way I've been able to do thinks is by creating mirrored folders locally, updating the local files, and then starting a sync and letting it run for a while, while I go do something else.

Additionally, my local machine isn't a web server, meaning that PHP files don't work. The browser will open them and display whatever HTML there is, but it will also display the PHP as the actual PHP code.

So today in the couple hours I have before heading out to a meeting, I've decided to set up a PHP web development environment. The other tech guy who was going to be working with me on KollegeKareer had mentioned it was easy if I found the right thing, and after looking around I think I've got what he was talking about. WAMP Server, standing for Windows/Apache/MySQL/PHP. I'm installing now, and we'll see if it works.

UPDATE:
Well after cleaning two hurdles, I have gotten it all working. WAMP comes with no instructions unfortunately. And from Googling, it seems that a LOT of people had both problems I had. The first is that Windows machines come with a server that's already running, from Microsoft. You either have to disable it, or change it to a different port. I found a Youtube video that explained changing the ports so that both can run together. Then I started getting an 403 Access Denied error. Turns out that WAMP comes with an Apache installation that is locked down. You have to go in and find a config file to unlock it.

That said, it's working now! w00t.
 

SQL Insertion Update

In regards to my post on Friday about SQL Insertion, I've been playing around with it and found some interesting things. The reason I never noticed a need for the fix before is that some implementations of PHP auto correct it. They automatically add backslashes to any character that could break the input, such as apostrophes and quotations. Unfortunately, I still don't know how to figure out if that correction is in place except for manual testing.

The server hosting the CESAC site doesn't use auto correction, while the servers hosting our Purdue ICS sites do. The question will be how to figure it out with a code check so that I only correct when it's needed. I'll update this post if I figure out how.

EDIT:

Got it. Turns out that when using the POST method for forms, a backslash is added to the three special characters: apostrophe, quotation mark, and backslash. This is because these three characters are used in the SQL insertion statement. They are then stripped when being added to the SQL. When an implementation of PHP has magic_quotes_gpc turned on, nothing happens to these backslashes. When magic_quotes_gpc is turned off, they are removed. The way then to test is a simple if statement, which returns a 1 for on and 0 for off.

if(get_magic_quotes_gpc(void)) { }

Additionally I found a better way to fix the problem if it needs fixing. I was using str_replace before, but that only works for apostrophes and backslashes, not quotations. I found a way to fix the problem specifically however. There is a function in PHP which does exactly what is needed. It adds back slashes to each of the three characters. The code ends up being:

if(get_magic_quotes_gpc(void)) {
    $title = $_POST["title"];
    $content = $_POST["content"];
}
else {
    $title = addslashes($_POST["title"]);
    $content = addslashes($_POST["content"]);
}

 

SQL Insertion

Earlier this Spring I build an online login section for the CESAC website, so that future webmasters wouldn't have to touch the code to just put in a quick announcement update.

It worked well, until yesterday I tried putting in an update, and nothing happened. I got no PHP error, instead the PHP went through the Insertion and then passed over to a success page, but didn't insert.

Given that yesterday evening I turned in my final project of the semester, this afternoon I had time to sit down and go through the code line by line (not as bad as it seemed, the submit page was only 20ish lines). It took me a good two hours, but I finally figured out the cause. Whenever a string that I was inputting contained an apostrophe, it would screw up the SQL insertion. It wouldn't cause a problem with the PHP, which is why I wasn't getting an error.

I was inserting using variables, and used apostrophes to contain each variable, ex: ... '$month', '$date' ... So whenever the string had an apostrophe, it ended the variable, or so it thought. And ended up really messing up the statement.

Turns out SQL has a quick fix for this. Placing a backslash ( "\" ) in front of an apostrophe tells the SQL to treat it as a character, instead of a limiter. So the solution was simple really. I had to use str_replace to replace all apostrophes with double apostrophes. $content = str_replace("'","\'",$content);

Success!
 

New Data Files Table

For those of you who have been following this blog for a long time, you might remember that over the summer I mentioned several times that I'm building a new website. I didn't want to share it until it was entirely done, but I'm just too excited about one new page to keep it entirely under wraps. A few of you have seen it already, (and given good advice), and it's now finished, visually and code wise.

The page I'm speaking of is a data table. Very similar code wise to the one I did over the summer, I've added some things that I'd learned since then as well as improved the efficiency of the javascript coding. The main difference though is the visual style. That part is what took me a good 2 months to settle down with, because I'm NOT an artist.

Inspired by the new Hotmail actually, I'm going for a white and light blue theme. One thing I was worried about initially was having that gradient go the full length of the options panel, but I really like it now that it's there. It distinguishes itself from the table itself while still maintaining visual continuity.

Now you might notice there aren't many files yes, and that's true. Only about a third of thing things that'll be there are there, and all the options in the options panel will be represented. It's just a matter of inserting the data into the SQL database though, I haven't gotten around to it. Besides adding more data, the table is finished.

Let me be clear, the site it self is not done, just this single page. You can feel free to look around the rest of it, but it's only about 60% complete. Next page on the list is the class schedule page. I want to stay with the white and light blue theme that I've got going on in the class files page, instead of just the block colors I have right now. So without further adieu, check it out.

Data Table

Any thoughts? Hate it, love it? Leave me a comment.
 

Data Table Finished

Well, finally finished with the data table entirely. For now at least. It's been added to the projects section of my website, complete with description and even links to test pages for different aspects.

Project Hub

Next week I'm going to be looking into user accounts and how that works, and I might eventually use the data table as a base to build onto with user accounts letting users not only add themselves, but also go back in and edit themselves as well. Well see how that goes next week.

I've also gotten my backups up to date, the last I'd made before the site went offline last weekend was from early May, so it's good to know that I'm protected if it happens again.
 

Weekly Project - Complete

I set out my goal for this week on Monday. The goal was to take everything I've learned about jQuery, PHP, and SQL over the past month and a half, and use it all to make an interactive data table.

I have accomplished my goal! Check it out.



I actually had 90% of it finished yesterday, and so today was planning on adding a bonus student portal, where students could add themselves to the database. This week is Stars though, at Purdue. That means that the campus is flooded with incoming freshman, all of which seem to need help with setting up their accounts. I got called to another lab to help, and as a result didn't really have much free time. I did manage to do a little tweaking though, and I added 3 select all boxes, one for each attribute.

This weekend, the student portal!

Another Update

Yesterday night I went ahead and finished the column changing buttons, and got everything working as it would appear to the end user. It was all static though, every name put in by hand.

I came to work today and determined to finish converting to PHP. And I did. That went very quickly actually, because each version of the table became a simple while loop.

The biggest problem though, happened when I needed to get the number of students from the database to my javascript file. This was necessary because the list of students is inside a container div, which has no default height set. If it had a static height, then the list might overflow, of the page might be longer than needed. If it had no height, then when less students are displayed, the header would follow the bottom of the list up, and could overlap with the search panel.

So the height of the container is set each time the page loads as the height necessary to show all students. This is accomplished by using each student's unique ID from the database. I access the max ID, and that is the number of students. Each student is 42 px in height, and the column titles are the same. So the number of students plus 1, times 42, is the total height.

The problem was getting the number of students to the javascript file. I tried using the PHP to set an invisible div's class to that number, and then use attr class in jQuery. But while it would grab the number, say 14, it wouldn't be a number. It would be a character 14.

After about a half hour, I finally moved that section of the jQuery code into the html main doc, and just uses PHP to create the line, num_students = 14;. It is now working, and the last thing I have to do is fix the multiple orders of display.
 

Fully Interactive Data Table

The interesting thing about my schedule on Monday and Tuesday is that because I work opening shifts, I get very little sleep before, and so end up taking a nap after. What this does is seemingly split the day in 2 parts, which means I can do quite a bit of work at work, and then wake up in the afternoon and evening and do more, without it seeming to drag on.

I spent a while laying in bed thinking about what I want to do, and I'm going to skip a few things I'd been planning on doing. Instead I'm going to go straight into a more ambitious project, that will give me a better idea of the difficulties involved with my upcoming project. The plan right now for the rest of this week is to create a webpage with a search bar on the side, and a table on the right. It will connect to a database, already filled in. There will be several forms of interactivity.

First, the user will be able to change the items displayed in the table using the search options, similar to Newegg's search feature, but in real time without reloading the page. This will be done with jQuery, hiding and displaying items with certain classes, as checkmark boxes are selected or unselected. There will be several columns, each being an 'attribute' with several options.

Second, the user will be able to change how the list/table is organized, by clicking on column headers. Up/down arrows will indicated ascending/descending, and a second click on the selected column will flip that.

This is hardly a groundbreaking idea, and it's not meant to be. But what it is, is a page that is beyond anything I've ever done before, yet builds on everything I've learned up to this point. No individual piece should be terribly difficult. I think the most complicated thing will be making sure that the PHP makes everything appear correctly, with echo. It's Monday evening now, I'll put in a start to it, but I'm not going to spend much time now, because I've got plans to meet up with friends later. However, I've got a 5 hour shift at work tomorrow with nothing to do but code, so I'll certainly have something to show by the end of it.
 

More Progress

I didn't do much with SQL over the weekend. I did however write up one quick page, based on the earlier adding page. The sole function of this page is to view the database of names, which at the time of this writing consists of 500 names. The user can input the range of names he or she wishes to view, and then the names will appear. The user can also switch between list organizations, as before.

My goal for the new few days is to add the option to reverse ascending and descending order for all 3 options, as well as the ability to add less than 10 names in the main page. And possibly tie everything together.

The problem right now is that there are 10 rows in which to add names. If less than 10 are filled out, then blank space is inserted. It shouldn't be to hard to add validation to the input, I just have to spend the time to figure out how.
 

Almost There

As I set for yesterday, my current goal in life is creating a webpage in which a user sees 10 rows of input boxes, with 2 columns. They will be able to enter 10 names, first and last. Upon clicking submit, the document will use PHP to send the information into a mySQL database. It will then pull that information out and display it in the order entered. Using options, the user will then be able to change the method of display, alphabetical by first name, last name, or order entered. Or reverse for any of those 3.

Yesterday I researched mySQL for the first time, and then moved to the PHP section of my code needed. I wrote up as proof of concept a comment box. However, while the comment box worked and took data from a submitted text box, it stored that in a plain txt file, not an SQl database.

Today, I got my mySQL database up and running, and figured out how to interact with it from PHP. I now have a page working allowing a user to add 2 names to the database. Next I need to change the code to a looping array which will be more efficient for 10 people.

The last big thing will be the different modes of display, and then I shall have all the tools I need to complete the big project which is still in the planning and therefore secret stage.

EDIT: (2:51 pm) I now have both the send to and retrieve functions up and working. Each person adds 10 new names, and then the PHP displays only the last 10 from the database. Now finally I am on to the last challenge, setting up the multiple display orders. Onward!

EDIT: (4:58 pm) Success! Check it out.
 

SQL

Today I turned my sights on SQL, which is a database language. Information is stored in the database and can be retrieved with PHP, to be displayed in different ways.

My goal for the next few days will be a page that has 10 text boxes, for me to enter names in. After I submit, I want the names to appear in a list. I want to then have the option to sort them alphabetically, as inputted, or reverse alphabetically.

I could do this manually with jQuery, the last part anyway. I could write the list 3 times, each time in the correct order, then have jQuery hide 2 of them, and switch which 2 are hidden when I click. But I'd have to do it manually. PHP and SQL should be able to do it automatically.

I doubt this will be done today, I've got less than 4 hours until my shift is over. I'm not even sure I'll be able to get mySQL up and running on my webspace. But we shall see.

EDIT (5:51 pm):
Purdue offers students a mySQL account, which I've finally figured out how to access. From the web portal that is included, I've been able to create a new table and add data, as well as remove data and edit data. Next step, figuring out how to access the database from a webpage I create, and setting up the PHP calls. 2 more hours, what shall they bring us.

EDIT (7:48 pm):
I ended up switching gears to learn about HTML forms. Something I should have done a while ago, but hadn't. My first working experiment lets a user submit 5 names. It then writes the names to a txt file and lastly reads it back to the user. Demo, Text File (For confirmation).

Next I went after something more ambitious, a comment box. Users can enter a name and a comment, and then have it displayed back to them. The comment is recorded in a text document with that person's name, and the date and time of the comment. Try it out and let me know what you think, I'll be able to see any comments you leave.