Thursday, June 30, 2011

Radio Buttons, HTML

So radio buttons are interesting. I'd been trying to come up with a validation would let me check to see if at least one option was selected. The problem is that when the page loads and not options are selected, the value is that set of radio buttons ISN'T null or zero or blank. It's the value of the first option. So all the times I was trying say that is the value is null, give an error message, I was wasting my time. The value is NEVER null. It's just the first one until the user makes a selection.

This threw me for a long while until I wrote a script to tell me in real time what the value was. Once I found out the problem, progress was swift. I placed a placeholder option before the main options, and set it's value to blank. I then set it to display:none, making it invisible. Now on page load, the value IS blank, and so my if statement works.

You can see the test page here.

And I now have everything I need to validate the input for the data table. And 2 hours left of work.
 

Input Validation

Earlier this week I created a webpage allowing users to add themselves to my database. A friend of mine was looking at it and found a problem. Instead of telling me though, he decided to show me, by adding 100 blank people to the database.

Input validation! It is necessary. It is also really f***ing difficult to do. I've been researching this for 2 hours and playing around with things, and nothing works at all. I first tried to create a script that would capitalize the first letters of the name inputs, but that failed entirely. Then I tried a more simple goal, checking to see if an input was blank or not. And that's not possible either. Or at least it's not working.

I'm about one more try away from being done, I'll post an update when I reach that.

EDIT (5:06 PM): Alright, I have gotten the name to capitalize correctly. Now to work on the prevention of submission of there are other errors.
 

Saturday, June 25, 2011

Congratulations, New York!



New York became the newest state to embrace marriage equality for all, last night. Gov. Cuomo still has to sign the bill, but he has said he will, and it has now passed the full Assembly.

My favorite part of this entire situation was Republican Roy McDonald, who voted for the bill and defended his position by saying "fuck it, I don't care what you think. I'm trying to do the right thing".
 

Friday, June 24, 2011

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!

Thursday, June 23, 2011

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.
 

Wednesday, June 22, 2011

Data Table Update

I spent several hours today working on the visual design and layout of the data table, and am pretty happy with the result. The foot still needs some work, it's sort of just a big blob at the moment, but everything else looks great.

The search panel still works, and either tonight or tomorrow I'll be adding the organize by column effects. It will be the same as I did in the webpage to add data to a table, last week's project, so I just have to use the same method.

Finally then I'll do the PHP, probably on Friday, to finish up the weekly project. Certainly a more ambitious one than last weeks, but understandably given my higher understanding of the languages.
 

Progress On The Table

It's Tuesday night, and I've spent the past few hours working on my project for the week, the interactive data table. I spent today working out the jQuery code for the search panel, which will show and hide rows depending on which check boxes are selected, without having to reload the page.

I've got that done, and there are 3 different columns in the table that correspond to search options. The tricky part was when clicking a box to unhide a category, getting it to only hide people in that category who were also unhidden with the other 2 categories. It's working now, but the code is sort of clunky, so tomorrow I'll try and figure out a way to cut it down.

Also tomorrow I'll work on the CSS and design of the page. I threw what is currently working together very quickly because I wanted to get to the jQuery, and it shows. It's all of 2 colors, ugly borders ... very unfinished. Which is okay, because it IS unfinished, and tomorrow I'll try to finish the visual aspects.

After that, I'll add in the jQuery for switching row organizations by column headers, which will involve writing out the entire table 5 times, organized each possible way, and then hiding and showing depending on what the currently selected column is. Finally, I'll work on the PHP to make it truely dynamic, with data pulled from a database.
 

Monday, June 20, 2011

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.
 

Friday, June 17, 2011

Eyes

What about black eyes, that conjure the image of the darkest of nights, sucking you in to that deep abyss of dismal despair?

Or blue eyes, in which you see a great sparkling ocean, fun and light yet always lies the possibility of squalls.

Brown eyes, the boy next door, soft and trusting. Seemingly innocent, but be warned, there's more than meets the eye.

Gray eyes, cold as winter morning. Passion lies hidden, yet springs free in the strangest of times.

Maybe green eyes are what you seek? Quick and fertile, spring's eternal blossom. Yet take heed, spring brings terrible storms.
 

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.
 

Thursday, June 16, 2011

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.
 

Wednesday, June 15, 2011

Limitations of PHP

The more I've learned about PHP, the more I realize how limited it is by itself. All PHP on a page runs before the page is even sent to a user's browser, which limits interactivity. Turns out another technology, AJAX, is needed to let to user communicate with the PHP and therefore interact. But then it turns out, AJAX isn't an individual thing, it's a collection itself.

However, javascript figures in prominently, which simplifies my life immensely. I took today off and relaxed, but tomorrow I shall return to the grind stone and see if I can come up with something more interesting than a page that tells you the date and time of log in.

EDIT: One thing that I've also realized is that there isn't much need to run PHP without reloading the page. The clock I wanted to write would be, but I can probably do that entire with jQuery.
 

Monday, June 13, 2011

Yay Purdue!


So it turns out Purdue has really embraced php already. My website is hosted through our ICS webspace, which I can easily access through Windows when I'm at a lab computer. It turns out that the entire ICS system already has PHP installed! All I have to do is write the scripts, and they work. I'm spoiled, it seems, which for now I can live with. I've also set up a mySQL account, which I'm not sure yet if I'll need, because I'm not sure how all this is going to work yet. For now though it's a good start.

EDIT (9:20am): It turns out Purdue DOESN'T actually have it pre-installed. Or at least something isn't working, because there's only one line of a two line conversation showing up here.

EDIT (9:47am): I tried downloading php from the main downloads page, and got a .tar file, which windows has been unable to open, even using the command prompt. So I went back and finally found a second page with a windows version, so it's extracting now. Just to give credit where it's due, whoever compressed it did a great job, 80 MB down to 20. It's slowly extracting, so we'll see if I can get it working after it finishes.

EDIT (10:08am): Well I just got it extracted and .... damn. The folder contains 14,747 files. Very few seem to have extensions. There's a test.html file, which gives a long list of errors. 2 other html files which don't even work. The problem with these tutorials is that all of them assume I know how to install the damn thing in the first place.

EDIT (10:20am): Progress! Okay, so lets go back to step one ... Purdue DOES have php installed already! I just had to make my file have a .php extension, which I didn't know, because no one felt like mentioning it. The inside is still the same, starting with html brackets. But w/e, it works!
 

A New Journey

The spring semester ended about a month ago. My big project during that month was learning javascript and jQuery, and I feel at this point that it has been accomplished. I'm not a master by any means, but at this point I feel that I could do almost anything given time and access to Google as a reference book. Which means it's time for the next step, PHP.

PHP is a general-purpose scripting language originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document. - Wikipedia

PHP is a much more versatile language than Javascript, because it's a real programming language, not just a markup language. It can read, and more importantly write, files on the server side, and it can work with databases. This means that it is what I'll need for the virtual career fair software I'm trying to design.

I've found a great tutorial, though it's from 2004, so we'll hope it's not too out of date. On the other hand, since I'm just trying to start out with the basics for now, it doesn't really matter. Once more unto the breach, dear friends.
 

Friday, June 10, 2011

IE 8, How I Hate Thee


I've been putting the final visual touches on my schedule creator, which works in tangent with my Purdue ICS webspace templates. It looks great on Firefox, Chrome, and Opera. IE doesn't like me though. On IE 8, the directions popup box refuses to give a darkening effect, because IE 8 doesn't support rgba. On IE 9, my buttons are out of place because their absolute position is constant, while parts of the page that are relative are different on IE 9.

I could probably find and fix the IE 9 error, but the problems with IE 8 and previous are just innate problems in the browser. At this point I'm calling it quits. Upgrade to current browsers, IE 9, Firefox 4, or Chrome 11. Or hell, even Opera or Safari. If you cling to IE 6, then it's your own damn fault the page doesn't work.
 

Sunday, June 5, 2011

Tweaking Firefox 4

I made the shift to Firefox 4 a couple weeks after it came out. As regular readers of my blog will know, I hate change, and so I tweaked it to look as close to 3.6 as I could. Tabs on bottom, regular drop down menus, etc. One thing I didn't like was the removal of the Status Bar from the bottom. I wasn't alone in that sentiment though, removing it had caused quite a bit of debate I guess, and Mozilla has a support webpage already created. It links to an Add-on which basically recreates the status bar. One thing I didn't like about it though, was lack of a top border. The first picture below shows it, the status bar is gray until its top, and then cuts off. It felt unfinished. So, I did some research, and found a pretty simple fix.

Firefox is built partially in CSS itself, and you are provided with a CSS file in which you can add tweaks. These override default settings. The problem is that I hadn't been able to find a listing of the names of features. From searching the web though, I did find what I needed.

The Status-4-Evar Add-on is built inside the Add-on bar. It has 3 sections, lined up horizontally, each with a separate id. Since it is inside the Add-On bar, I can give it a white top border, and give the Add-on bar a gray border. This will give a 3D finishing effect.

The code below is what I added to by userChrome.css file. I added the dark border, black but only .6 transparent. I also set the bottom border to zero, because for some reason setting the -moz-appearance added one, I'm not sure why. I then did the same thing for each of the 3 Status bar sections, but white instead of gray.

#addon-bar {
-moz-appearance: none !important;
border-top: 1px solid solid rgba(0,0,0,.6) !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

#status-bar{
-moz-appearance: none !important;
border-top: 1px solid white !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

#status4evar-progress-widget{
-moz-appearance: none !important;
border-top: 1px solid white !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

#status4evar-status-widget{
-moz-appearance: none !important;
border-top: 1px solid white !important;
border-bottom: 0px solid rgba(0,0,0,.25) !important;
}

The two images below are before and after screenshots. Click to view the entire window for reference.