Solved

Connecting the pieces of a wev application

Posted on 2015-01-15
8
149 Views
Last Modified: 2015-01-16
I finished a couple of basic courses dealing with javascript and PHP, though that's really nothing yet.  Going through MySQL essentials and I know understanding and using these scripts wills take time, I learn better visually or just doing it.

What confuses me at this point still is where to save PHP and MySQL.  Let me clarify.

*I create an HTML5 page save it as index,html with a link in the gead section pointing to where I save the CSS file below
*I create a CSS3 page and save it as something like main.css in a separate file in the same folder as the html

This is where I get lost

* I create a PHP page and save it in the same folder as the above two with a PHP extension and point to it in the HTML head?

* I create a database which I'm working on the course, but the PHP will point to the database from the PHP page?

I actually do get that HTML, CSS and Javascript are client side and PHP and MySQL are server side.  I'm using RepairShopr,com as my inspiration and it will take time so I'm patient with the process of crawling before I walk.

I really appreciate the time to help me get through the basics. Only so much you can learn from watching videos if you start from the wrong direction.
0
Comment
Question by:Mark Velasco
8 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 300 total points
ID: 40552802
I create an HTML5 page save it as index,html with a link in the gead section pointing to where I save the CSS file below

Good.

I create a CSS3 page and save it as something like main.css in a separate file in the same folder as the html

Good.

I create a PHP page and save it in the same folder as the above two with a PHP extension and point to it in the HTML head?

Nope.

I create a database which I'm working on the course, but the PHP will point to the database from the PHP page?

More or less, yes. But there's a lot more to it.

----------------------------------

So as you (may) know, the way a web site works is you make an http call to a file (.html for this sentence) from a browser and a web server receives the call, checks to see that the anonymous user has permission to access that file in that location, and then sends the requested file to the browser.  

The browser interprets the HTML it receives and makes additional calls to the server based on commands in the HTML.  This is how the CSS file gets involved, as well as any images or javascript.  Things get processed in a certain order and the output is rendered on the screen.  Using clicks, or several other actions in the case of javascript, the whole process repeats.

Now, let's assume there is an HTML form on the web page above.  So the user enters some data in the form and clicks a submit button.  That data is sent to the server to an address contained the <form> tag that may look like this:

<form name="myForm" method="post" action="myScript.php">

The above tag sends the form data via the POST method to a file named myScript.php in the same folder as the web page containing the form.

PHP is a server-side language.  This means that it does NOT get handled by the user's browser but by a process on the web server.  You can have PHP do anything it is configured to be able to do and also send HTML back to the user's browser.  For instance, here is a simple version of myScript.php:

<?php 
echo "Thanks, we got the form";
?>

Open in new window


All that will do is print "Thanks, we got the form" when the user presses submit. A more complex script would take the variables in the POST array, split them into variables and do a variety of things, including sending email and passing them to a database, changing the output based on the input and more.

So MySQL is a database program that runs on the server.  PHP has a number of functions that allow it to connect to several different kinds of databases but since both PHP and MySQL are included with most Linux distributions along with the Apache web server and all for free, we get the acronym LAMP (Linux, Apache, MySQL, PHP).  Here's what a PHP script that calls a MySQL database might look like:

<?php
$servername = "localhost"; // the name of the mysql server
$username = "username"; // your mysql username
$password = "password"; //your mysql password

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?> 

Open in new window


Pretty simple, right?  The magic is in the mysqli() function and that's all handled for you.  All you need to know (initially) is how and when to call it.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 300 total points
ID: 40552806
So the above is a very simple application that uses an HTML page to connect to a PHP form.  But PHP can also also have HTML in it. Remember that a PHP file is first processed by the PHP engine and then the results (if any) are sent back to the browser.  So it's very common to NOT use .html pages at all when using PHP and instead you do stuff like this (assume the following is myScript.php):

<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
$message = "Connected successfully";
?> 
<html>
<head>
<title>My PHP Test Page</title>
</head>
<body>
<h1>Did I connect?</h1>
<p><?php echo $message; ?></p>
</body>
</html>

Open in new window


The above is a complete PHP/MySQL application, albeit a small and rather useless one.  When the user goes to yoursite.com/myScript.php with the browser, the PHP in the above sample is evaluated in the order it is written.  This means the top part of the file happens first and either dies if the MySQL info is wrong or it creates a variable named "message" and that variable contains the text "Connected successfully"  

PHP then looks for any more of its script (which is found with the <?php ?> syntax) and processes it.  In the sample above, we just echo the value of the variable message in the middle of the HTML section.  After all of that is done and there are no errors, the HTML is sent to the browser and rendered.

Does this all make sense so far?  Any questions?
0
 

Author Comment

by:Mark Velasco
ID: 40553195
OK,

so instead of making an HTML page I create a PHP page with html in it as save it as a PHP file.  The CSS will still go in the HEAD section of the HTML part of the PHP page pointing to the CSS location.

On the PHP page before the HTML code is where I create PHP instructions as mentioned above to connect to MySQL server.

One on the Lynda.com PHP essential courses said to put PHP at the bottom of the HTML before closing out the body tag.  But they didn't say anything about the database connection with PHP going at the top so thanks for that info.

instead of having an index.html file pointing to my website, it will be MyPHP.PHP Right?  Where does this get saved? in the root where the index.html file usually goes?

I'm using Godaddy FYI.  So if I understand from something I watched, the PHP and HTML sort of weave in and out of each other as needed on the same page, the MyPHP.PHP file, the CSS still has its own file.

I'm really sorry if i seem redundant, it just seems getting started will be the hard part as these pieces need to go in very specific places and I really want to make sure I understand the foundation.  The courses are helpful but kind of explain things in a vacuum and leave out details like where to save, what extension to use so I appreciate the info.

If I'm still not getting something, I hope to hear back from you guys, heck even if I'm on the right track please let me know.
0
 
LVL 4

Assisted Solution

by:Jim Riddles
Jim Riddles earned 100 total points
ID: 40553457
Mark,

I would suggest beginning with reading the following article from Ray Paseur.  Get used to seeing that name, if you use Experts Exchange any length of time.  His articles have helped me greatly in progressing my own knowledge of PHP and programming in general.

http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html

His article contains many links to other articles, all very useful.

There is nothing more that I could say that hasn't been said better in the articles available from that link.  If you have specific questions, feel free to ask them, of course, but really spend some serious time browsing the articles.  It will definitely give you a jump start.
0
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 100 total points
ID: 40554187
There are several things in PHP that Must come before any HTML.  These include 'cookies' and any 'headers' including redirects because you have to send them in the headers that precede the page content.  And you have to put 'echo' statements where they need to appear in the page content.  Below is my PHP Email demo page where many things go.  It works on both my Windows and Linux hosting on Godaddy.  Save it as 'Email.php' because it will post to itself by that name.  Put your email address as the '$toText' value.
<?php
error_reporting(E_ALL);
ini_set('display_errors','1');

# some settings of POST vars
if (!isset($_POST['submit']))  $submit = ''; else $submit = $_POST['submit'];
if (!isset($_POST['subjectText'])) $subjectText = ''; else $subjectText = $_POST['subjectText'];
if (!isset($_POST['msgText'])) $msgText = ''; else $msgText = $_POST['msgText'];
if (!isset($_POST['ccText'])) $ccText = ''; else $ccText = $_POST['ccText'];
if (!isset($_POST['bccText'])) $bccText = ''; else $bccText = $_POST['bccText'];
if (!isset($_POST['nameText'])) $nameText = ''; else $nameText = $_POST['nameText'];
if (!isset($_POST['fromText'])) $fromText = ''; else $fromText = $_POST['fromText'];

if ($submit == "") {
    $title="Test Email Page";
    $announce="---";
}
else {
	if($fromText === "") die("No name!");
  $toText="youremail@yourdomain.com";
	$title="Test Email Page";
  $announce="Your Message has been Sent!";
	$header = "From: ".$fromText."\r\n";
//	$header .= "Cc: ".$ccText."\n";
	$header .= "Reply-To : ".$fromText."\r\n";
	$header .= "Return-Path : ".$fromText."\r\n";
	$header .= "X-Mailer: PHP\r\n";
	$header .= "MIME-Version: 1.0\r\n";
	$header .= "Content-Type: text/plain; charset=iso-8859-1\r\n";
//	ini_set(sendmail_from,$fromText);  
	mail($toText, $subjectText, $msgText, $header, '-f'.$fromText);
//	ini_restore(sendmail_from);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo($title)?></title>
<style type="text/css">
<!-- 
A:link { color: #999999; }
A:visited { color: #999999; }
A:hover {color: #0099ff;}
-->
</style>
<script type="text/javascript">
<!--
function check()
{
var at=document.getElementById("fromText").value.indexOf("@");
var eml=document.getElementById("fromText").value;
var nam=document.getElementById("nameText").value;
var alerttxt="";
var submitOK="true";

if (eml.length < 5 || at == -1)
    {
    alerttxt=alerttxt+"Please enter a valid e-mail address!\r\n";
    submitOK="false"
    //return false;
    }
if (nam.length < 3)
    {
    alerttxt=alerttxt+"Please enter your name.\r\n";
    submitOK="false"
    //return false;
    }
if (submitOK=="false")
    {
    alert(alerttxt);
    return false;
    }

}
// -->
</script>
</head>

<body bgcolor="#ddeedd">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" summary="" width="580">
<tr><td align="center">

<?php
if ($submit != "") {
   	echo ("To: ".$toText."<br>\r\nSubject: ".$subjectText."<br>\r\n".$msgText."<br>\r\n".$header);
		}
?>

<p><b><font color="#000000" size="5">Test Email</font></b></p>
<font size="4" color="#000000">

<form method="POST" action="Email.php" onsubmit="return check();">
    <p><font size="3"><b>Name: <input type="text" name="nameText" id="nameText" size="46"></b></font></p>
    <p><font size="3"><b>Email: <input type="text" name="fromText" id="fromText" size="46"></b></font></p>
    <input type="hidden" name="subjectText" value="Web Mail">
    <p><font face="Arial" size="3"><b>Message Text:</b></font></p>
    <p><font face="Arial" size="3"><b><textarea rows="6" name="msgText" cols="60"></textarea></b></font></p>
    <p><font size="3"><b><input type="submit" value="submit" name="submit" style="font-family: Arial; font-size: 12pt; font-weight: bold"></b></font></p>
    <input type="hidden" name="state" value="1">
  </form>
  <b><font face="Arial" size="4" color="#e00000"><?php echo($announce)?></font></b><br><br>

</font>
</td></tr>
</table> 
</div>

</body>
</html>

Open in new window

0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 300 total points
ID: 40554218
so instead of making an HTML page I create a PHP page with html in it as save it as a PHP file.  The CSS will still go in the HEAD section of the HTML part of the PHP page pointing to the CSS location.

Correct.

On the PHP page before the HTML code is where I create PHP instructions as mentioned above to connect to MySQL server.

See Dave's post above for a complete answer and sample.  PHP code goes where it needs to go.  Typically a data-driven page needs its data before anything else can happen so that code comes first.

One on the Lynda.com PHP essential courses said to put PHP at the bottom of the HTML before closing out the body tag.  But they didn't say anything about the database connection with PHP going at the top so thanks for that info.

Which Lynda course was that so I know to not recommend it?

instead of having an index.html file pointing to my website, it will be MyPHP.PHP Right?  Where does this get saved? in the root where the index.html file usually goes?

Name your files the way you would .html files.  So index.php instead of index.html and build folders and subfolders from there.  Apache is usually configured to look for index.php as well as index.html and since this and the rest of the files are publicly accessible web pages, they live in the public web folder as .html files would.

You can place PHP files outside of the public web root but a PHP file in the public root still has to make the call to them.  This gets us to a point of explaining how the include() and require() functions are used and that's a little bit beyond where you are at the moment.

I'm using Godaddy FYI.  So if I understand from something I watched, the PHP and HTML sort of weave in and out of each other as needed on the same page, the MyPHP.PHP file, the CSS still has its own file.

Yes.  You could also put the CSS in the <head></head> section of the file using the <style> tag if you wanted to, but that's considered highly inefficient.  Common resources that need to be accessed by every page (CSS, javascripts, sometimes PHP) on the site are kept as separate files so that you make an edit in one file and it changes everywhere.
0
 

Author Comment

by:Mark Velasco
ID: 40554696
Hey Guys,

I appreciate all the help.  I'm going to give all the resources you provided as a way to help progress things.  Sorry if I seem clueless on these topics but I've spent my time in break/fix and made a decent living at that, so coding is something I never really touched but very interested in learning.

But my brain works funny, I need things in logical order, step by step especially with something as diverse and new to me as coding/scripting.  There's so much info out on the web it's overload.

At least here I know I'll get pointed in the right direction with people who know their stuff.  Thanks again
0
 

Author Closing Comment

by:Mark Velasco
ID: 40554705
These were all great tips, advice and helpful.  I spread the points as equally as I could for the time and patience these experts gave me.  It's too bad I had to choose one as the "Best Solution" because each provided valuable info and resources, so not a knock on the others.

It was nice to have a place to ask questions from experts and not made to feel dumb, a nuisance or not even get an answer.  It's a credit to these members willing to share the expertise whether it's a beginner (like myself) or a veteran having a complex issue.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now