XHTML Page With Javascript to Write to a MySQL Database

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 7033 Views - Last Post: 27 March 2012 - 09:42 AM

#1 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

XHTML Page With Javascript to Write to a MySQL Database

Posted 04 April 2010 - 02:51 PM

hey guys,

i have a project where i have to design a simple site. what needs to be done is this.

create an XHTML <FORM> for a users first and last name.
Create A Javascript code that can read the data from that <FORM> and write to MySQL database that stores the names.
Also have that Javascript code be able to delete a name from that database.

NO CHECK WILL BE NEEDED FOR THE SECOND PART OF THE JAVA CODE. WE CAN ASSUME THE NAME TO BE DELETED IS ALREADY IN THE DATABASE!

Does anyone have any idea of a good tutorial page explaining MySQL and Javascript?

Im clueless as to how to connect the FORM to the JSP to edit the database.

Here's the Exact Rules


Make a Database with a table named Members with a single attribute clubMembers. An HTML Form allows members to be added to the data base by transmitting a Form input variable newMemberName to a designated JSP program which adds members to the database. Verify the additions by manually displaying the database tables before and after additions. Test and Document appropriately. You will be using the MySql database.

1. Add a password field to the form and protect the database with a password, rejecting access if the password fails. Use POST method on form so password is not overtly exposed in the query string.

2. Use a radio button option on the form to allow the user to either insert or delete a member from the database. You can assume that if the user provides a name to be removed then that name is actually already in the database and is unique.

Upload your files to the public_html folder of your AFS account..
ALSO, please upload your files plus the url where your files are located to WebCt using the submission form under the assignment icon. The time stamp recorded by WebCT will be the timestamp that I use to determine if your assignment is on time or not.

This post has been edited by newkid34: 04 April 2010 - 05:00 PM


Is This A Good Question/Topic? 0
  • +

Replies To: XHTML Page With Javascript to Write to a MySQL Database

#2 k0b13r  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 15
  • View blog
  • Posts: 243
  • Joined: 18-July 06

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 05 April 2010 - 05:16 AM

I think you need AJAX ;) It's a trick used to send asynchronous requests to server via Javascript :) You can find more theory about this here http://en.wikipedia....x_(programming) . To avoid writing everything yourself, get some Javascript framework, for example: jQuery http://jquery.com/ . It helps a lot with AJAX!
Hope it helps :)

This post has been edited by k0b13r: 05 April 2010 - 05:17 AM

Was This Post Helpful? 0
  • +
  • -

#3 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1184
  • View blog
  • Posts: 7,254
  • Joined: 07-September 06

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 05 April 2010 - 07:33 AM

The actual assignment (posted at the end) says nothing about having to use Javascript, it says to use JSP, which is a server-side language. It also says to use HTML, instead of XHTML, but there is very little difference there.

Basically all you need to do is create an HTML form that posts to some .jsp page (method="post" action="somepage.jsp") and has a few variables:
newMemberName (the name)
act (the radio buttons, will either be delete or add. NOTE - You could name this variable differently)
password (the password for accessing the page, so you aren't able to just add and delete people without being authorized).

After that you use JSP to access the posted variables and do things accordingly.

Hope that makes sense.
Was This Post Helpful? 0
  • +
  • -

#4 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2876
  • View blog
  • Posts: 11,050
  • Joined: 15-July 08

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 05 April 2010 - 06:32 PM

Java != Javascript! JSP, as stated above is a form of Java technology. If you need help with the JSP code, we over in Java would be happy to help you in this forum

:D
Was This Post Helpful? 0
  • +
  • -

#5 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 06 April 2010 - 01:32 PM

i'm actually still quite confused.
im just getting used to the proper code for establishing a connection to the MySQL server.
i totally forgot about the need for the radio buttons and i don't know where to start as far as getting the code to post to another jsp page somewhere =(
Was This Post Helpful? 0
  • +
  • -

#6 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 06 April 2010 - 02:08 PM

I don't know JSP but I do know programming syntax and maybe I can help. You need to break the program into pieces to simplify.

1. You need a script that will handle form validation. You need to check if the user selected the 'delete' or 'add' radio button and if they entered a value in the text field.

2. Posting to another page in the form is as simple as this <form action="other_page.htm" ....

3. Now that we know what radio the user has selected, we should connect to the database.

4. Delete or insert the table row as necessary to the database.

When I'm stuck on something, I look to google. Try language specific searches like 'validating a form in jsp', 'connecting to mysql database jsp', or 'writing mysql queries jsp'. You might probably will not find your program exactly but all you need is a good starting point. Sometimes you see a new function you never knew about before and voila, you've got it.
Was This Post Helpful? 0
  • +
  • -

#7 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 06 April 2010 - 03:02 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="windows-1250"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MySQL and Javascript</title>
</head>

<body>
<p>
<center><h1>Form For Database Input or Deletion</h1></center>
</p>
<p>
<form>
Name: <input type="text" name="first"></input>
<input type="radio" name="deletion" value="deleted"> Delete </input>
<input type="radio" name="deletion" value"inserted"> Insert </input>
</form>


</body>
</html>


So that's the code I have so far, simple but it's what I need.

heres the code i was told should give me a connection to the database im using

<%@ page import="java.sql.*" %>
<%
String connectionURL = "jdbc:mysql://sql2.njit.edu:3306/<database_name>";
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
%>

<html><body>

<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
connection = DriverManager.getConnection(connectionURL, "<username>", "<password");
statement = connection.createStatement();
rs = statement.executeQuery("SELECT * FROM <tablename>");

while (rs.next()) {
out.println(rs.getString("column1"));
out.println(rs.getString("column2"));
out.println(rs.getString("column3"));
}

rs.close();
%>

</body></html>



of course i have to fill in my info for my database name and user and password.
I know I don't need ALL of that code(The End Part) but that's what I've got so far.
as far as form validation goes... we did some validation in class but all we did was check if something was in a text box and if not it showed an error that said you needed to put something in the box.
how can i check if a certain radio button is clicked or not?
Was This Post Helpful? 0
  • +
  • -

#8 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 07 April 2010 - 01:30 PM

update, heres my code it doesnt work though. any thoughts?

<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<script type='text/javascript'>
<%@ pageimport="java.sql.*" %>
<%
String connectionURL = "jdbc:mysql://sql2.njit.edu:3306/mrn5";
Connection conn = null;
Statement statement = null;
ResultSet rs = null;
%>

<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection(connectionURL, "mrn5", "UonYKiJY");
statement = conn.createStatement();
rs = statement.executeQuery("SELECT * FROM clubMembers");


while (rs.next()) {
out.println(rs.getString("clubMembers")+"<br>");
}


rs.close();
%>
<%
function formValidator(){
	// Make quick references to our fields
	var name = document.getElementById('name1');
	var delete = document.getElementById('delete1');
        var insert = document.getElementById('insert1');
%>
</script>

<title>MySQL and Javascript</title>
</head>

<body>

<script type='text/javascript'>
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection(connectionURL, "username", "password");
statement = conn.createStatement();
rs = statement.executeQuery("SELECT * FROM clubMembers");


while (rs.next()) {
out.println(rs.getString("clubMembers")+"<br>");
}


rs.close();
%>

</script>

<p>
<center><h1>Form For Database Input or Deletion</h1></center>
</p>
<p>
<form onsubmit='return formValidator()'>
<p>
Name: <input type='text' name="first" id='name1'></input><br></br>
password: <input type ='text' name='pass' id='pass1'></input><br></br>
</p>
<input type="radio" name="deletion" id='delete1'> Delete </input>
<input type="radio" name="insertion" id='insert1'> Insert </input>
<input type="submit" value="submit"></input>
<input type='reset' value ='Clear'></input>
</form>


</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#9 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 07 April 2010 - 01:52 PM

Why doesn't it work? Is there an error message?
Was This Post Helpful? 0
  • +
  • -

#10 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 07 April 2010 - 02:09 PM

View Postjrm402, on 07 April 2010 - 12:52 PM, said:

Why doesn't it work? Is there an error message?


I have no idea how to test it....
Was This Post Helpful? 0
  • +
  • -

#11 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 08 April 2010 - 07:27 AM

after re-reading the post from the moderator i can see how to create the form that posts to a jsp page but the problem i am having is actually writing the code for the JSP. idk how to use the variables and check them for certain values then post to MySQL via JSP.
Was This Post Helpful? 0
  • +
  • -

#12 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 08 April 2010 - 08:39 AM

Not to sound mean, but it sounds like this could be a class project. Isn't there a book that you've been learning from? Let me know the details so we can help you more.
Was This Post Helpful? 0
  • +
  • -

#13 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 08 April 2010 - 08:54 AM

it is a class project.

The teacher goes from powerpoints she creates and there is a book for reference but it only goes on to talk about creating a netIDE database or something that comes free with java and only talks about how to edit the code to make it work locally by using C://localhost

we have a database created for us at the school and we have to use that one, which is MySQL.

i cant seem to figure out if the code i've given is actually connecting to the database or not.

the book gives examples of code but its in bits and pieces and were supposed to have some other reference material with the rest of the code, but i think that comes in a "workbook" that goes along with the TEXT but we didn't need that book.....
Was This Post Helpful? 0
  • +
  • -

#14 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 08 April 2010 - 09:02 AM

Geez, isn't school so frustrating sometimes! :gun_bandana: (Just kidding about the smiley don't do anything irrational).

So here's what I found on google. I did Java in high school but never got further than that really. JSP looks very similar.

Here's the main page:
http://www.codango.c...abase/displayr/

Those links should help you out.
Was This Post Helpful? 0
  • +
  • -

#15 newkid34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 22-November 09

Re: XHTML Page With Javascript to Write to a MySQL Database

Posted 08 April 2010 - 12:08 PM

so i went through those pages and tried a few things but i cant get the table to show. i linked the page in

when i use

rs = statement1.executeQuery("SELECT * FROM clubMembers");

nothing shows up on screen, do i have to create some kind of pop-up box or something to show the data. i thought it would show automatically.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2