Simplified project using MYSQL, PHP, and JAVASCRIPT

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by barrowvian »

My original post is here from the php code section: viewtopic.php?f=1&t=86938&p=480024#p480024

Ive decided, that as a beginner programmer, that the project listed above is a bit out of my depth at the moment but that will ultimately be my goal. So effectively, Ive seriously simplified it (I hope) but still need a bit of help in getting started.

So here goes;

Im starting with a very simple sql database containing student_id, course and grade.
The database will initially be populated with only 2 rows;

1 Computing 1.0
2 Sports 2.0

Im wanting the form to contain a single dropdown menu that has the course names in it and a "both" option. (E.G "computing", "sports", "both"). The page will also contain a "submit" button that will load a new page and display the results - based on the number of rows selected.

So in order of processes it will be;

1 - Select option for dropdown menu
2 - Click submit
3 - Perform query (e.g SELECT * FROM table WHERE course = 'computing';)
4 - Open a new page that displays "You have selected 'n' records".

I have no javascript experience so any pointers as what would be the best areas to research would be a great help, as will a general outline of what functions etc I will need to use to get this to work. I feel once I got this step out of the way it will allow me to extend it and add another dropdown menu containing grade etc until I have enough experience to construct the project in the php code section.

Thanks for the help in advance
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by califdon »

I'll try to illustrate for you how these technologies relate to each other.

To just display a web page with a data entry form, including a dropdown box, you only need HTML. If you need other user interaction, you would usually need to incorporate Javascript in that file, and to meet current Internet standards, you would use CSS to specify the presentation styles, either within the file or as another file that is referenced from the HTML file.

But to extract data from a database, including for the purpose of populating the list of the dropdown box, you need to generate the HTML dynamically on the server, using PHP, before sending it to the browser.

And when the user enters data and clicks on the Submit button, the data is sent to a PHP script that processes the data and returns a new page to the browser. An option is to use AJAX to return data that updates the existing page without reloading a new page, but I agree with your decision to gain a foothold in the other technologies before launching into AJAX.

I recommend starting with tutorials like the excellent ones at http://w3schools.com. I would recommend the following tutorials at that site, in this order:
Learn HTML
Learn CSS
Learn Javascript
Learn PHP

And then I would recommend a good MySQL tutorial, perhaps something like: http://www.tizag.com/mysqlTutorial/mysqlsyntax.php.

Good luck and when you have questions as you go along, we will try to answer them here.
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by barrowvian »

Im fairly comfortable with the majority of html and css so thats no really too much of a problem.

Im trying to cut aspects of the project down. I've decided that a drop down menu wouldnt be the best choice as if it was to add different topics and the user wanted to select a specific 2 out of 3 then it wouldnt be possible. Because of this I have decided to use radio buttons.

To start with Im going to have 2 check boxes. If one if selected (for example computing) then submitted it will perform a SELECT * FROM db WHERE course ='computing'; To which I would like it to simple just display the number of rows selected as opposed to all of the individual rows. Is there a specific command to do this; and if so what is it?

I think this is this is possibly the simplest starting point for me and then to build from there.

Is there a way to link a php IF statment to a check box if it has been selected, using its value?
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by califdon »

barrowvian wrote:Im fairly comfortable with the majority of html and css so thats no really too much of a problem.
Good.
Im trying to cut aspects of the project down. I've decided that a drop down menu wouldnt be the best choice as if it was to add different topics and the user wanted to select a specific 2 out of 3 then it wouldnt be possible. Because of this I have decided to use radio buttons.
Be aware that you can select only one radio button in a group. If you want to allow for multiple selections, you should use check boxes. You can also use the "multiple" option of drop down boxes. See http://www.w3schools.com/TAGS/tag_select.asp
To start with Im going to have 2 check boxes. If one if selected (for example computing) then submitted it will perform a SELECT * FROM db WHERE course ='computing'; To which I would like it to simple just display the number of rows selected as opposed to all of the individual rows. Is there a specific command to do this; and if so what is it?
Sure. After you use the mysql_query() function, use the mysql_num_rows() function. You don't have to retrieve the rows with mysql_fetch unless you want to use them.
I think this is this is possibly the simplest starting point for me and then to build from there.
Probably so.
Is there a way to link a php IF statment to a check box if it has been selected, using its value?
Yes, that's exactly how you do it. In your script that is called by the Form's "action" parameter, you would first extract the values of all the Form values passed in the $_POST array, then you just examine the value of the Input with the name of the check box, like this:

Code: Select all

...
  if(isset($_POST['username'])) $username=mysql_real_escape_string($_POST['username']);
  if(isset($_POST['bkfst'])) $bkfst=mysql_real_escape_string($_POST['bkfst']);
  if(isset($_POST['lunch'])) $lunch=mysql_real_escape_string($_POST['lunch']);
  if(isset($_POST['dinner'])) $dinner=mysql_real_escape_string($_POST['dinner']);
  ...
  if(isset($bkfst)) {
      // do whatever for bkfst
  }
  if(isset($lunch)) {
      // do whatever for lunch
  }
  if(isset($dinner)) {
      // do whatever for dinner
  }
...
The first part of the above tests whether each value exists in the $_POST array. If it does, it "escapes" certain characters that would allow hackers to inject code into your script, then assigns the value to a variable. If a check box IS checked, there will be a value for that name, if a check box is NOT checked, there will be no value for that name in the $_POST array. After that, you can just test for whether any value was assigned to each name.
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by barrowvian »

Right, I think I'm starting to get it...hopefully!

In my previous post I meant to say check boxes as opposed to radio button - thats what happens when you try and read a different subject to what you typing on screen haha.

Anyways, from what you have written I have come up with this - I'm not sure how correct it is for layout but it works!

Code: Select all

 
<div align="center">
    <form name="form1" method="post" action="process.php">
        <p>
            Computing:<input type="checkbox" name="computing">
            <br />
            Sport:<input type="checkbox" name="sport">
            <br /><br />
            <input type="submit" name="button" id="button" value="Submit">
            </p>             
    </form>         
</div>
 
And here is the process.php

Code: Select all

 
<?php
     if(isset($_POST['computing']))
     {
         echo "Computing is SELECTED" . "<br />";
     }
     else
     {
         echo "Computing is NOT SELECTED" . "<br />";
     }
     if(isset($_POST['sport']))
     {
         echo "Sport is SELECTED" . "<br />";
     }
     else
     {
         echo "Sport is NOT SELECTED" . "<br />";
     }
?>
 
I'm just messing around with it for the moment, but to have this working feels like I've made my first real bit of progress :D

I think I've missed something out in the checkbox attributes but Im not quite sure what is it yet. My aim now is to correct the layout and for it to perform a sql query if a checkbox is selected. If you could provide any pointers as to the best approach for this id be most greatful!

My sql table is very basic and contains 3 rows that contain the 'computing' course and 2 rows that contain the 'sports' course. What I want to do is if the computing checkbox is selected then perform a select * from table where course ='computing' and just display the amount of rows I have selected.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by califdon »

You're off to a good start. You probably should include a value= attribute in the check box Input, which is the value returned if the box is checked, but I believe it defaults to the name of the check box. If you wanted to have a box checked by default when the form is presented, you would add checked="checked" to the Input tag.

Think carefully about exactly what you want to be able to do. Since I believe you have a table with just one field that may contain either "computing" or "sports", you clearly have to make your query search for either one or the other OR both. That's different from a table that has several fields and you might be asked to search for records that contain the values in ANY of the fields or the records that contain the values in ALL of the fields (which would be an AND in the query).

For your example, you can just use IF statements (or Select Case statements, when you expand to several more choices) to form your SQL query string. Then you can connect to your database server, select the database, and run your query. Finally, you can either use a while() loop to fetch each row and print it, or just use mysql_num_rows() to determine the count of rows returned.

Have fun.
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Simplified project using MYSQL, PHP, and JAVASCRIPT

Post by barrowvian »

I've luckily stummbled across some more good information and have applied some of my basic criteria. This has also allowed me to eliminate the action="process.php" attribute so that I can run it all in the same form.

Still far from complete, I havent even begun to look at databases yet - once I can tinkered around with this further it should hopefully start coming together a bit further. I really appreciate the amount of support califdon, without your advise I'd surely be :banghead:

Anyway, heres what I've got so far;

Code: Select all

 
<html> 
<head> 
<title>tester_page</title> 
</head> 
 
<body bgcolor="#ffffff"> 
<form method="post"> 
Choose a course:<br /><br /> 
<input type="checkbox" name="course[]" value="computing">computing 
<input type="checkbox" name="course[]" value="sports">sports 
<br />
<br />
Chose a grade:<br /><br /> 
<input type="checkbox" name="grade[]" value="1">1st 
<input type="checkbox" name="grade[]" value="2.1">2.1
<input type="checkbox" name="grade[]" value="2.2">2.1
<input type="checkbox" name="grade[]" value="3">3
<input type="checkbox" name="grade[]" value="Fail">Fail
 
 
<br />
<br />
<input type="submit" name = "submit"> 
<input type="reset" name = "reset"> 
</form> 
 
<?php 
if (isset($_POST['submit'])) { 
        $course = $_POST["course"]; 
        $grade = $_POST["grade"];
   $course_count = count($course); 
   $grade_count = count($grade);
   
        echo 'Courses chosen: '.$course_count.'<br><br>'; 
        if ($course_count>0) { 
                echo 'You chose the following courses:<br>'; 
        } 
        for ($i=0; $i<$course_count; $i++) { 
                echo  ($i+1) . '- ' . $course[$i] . '<br>'; 
        } 
      echo "<br><br>"; 
      
        echo 'Grades chosen: '.$grade_count.'<br><br>'; 
        if ($grade_count>0) { 
                echo 'You chose the following grades:<br>'; 
        } 
        for ($i=0; $i<$grade_count; $i++) { 
                echo  ($i+1) . '- ' . $grade[$i] . '<br>'; 
        } 
      echo "<br><br>"; 
} 
?> 
</body> 
<html>
 
I understand 95% of it all, so in the process of being able to define what each segment means. With a bit of luck I will have the layout completed within the next couple of days and then will go from there.
Post Reply