Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Can someone please explain how Website coding really works?
New Posts  All Forums:Forum Nav:

Can someone please explain how Website coding really works?

post #1 of 9
Thread Starter 
From my understanding, when someone loads a webpage, the server creates an HTML file from a PHP file, which gets its database info from MySQL, and sends it to the client, but where does other languages, like CSS, JavaScript, and other server-Side programming(C++,or java) fit in?

Thanks
post #2 of 9
Quote:
Originally Posted by Jtvd78 View Post
From my understanding, when someone loads a webpage, the server creates an HTML file from a PHP file, which gets its database info from MySQL, and sends it to the client, but where does other languages, like CSS, JavaScript, and other server-Side programming(C++,or java) fit in?

Thanks
Essentially with HTML coding you can either embed the CSS/Javascript, etc. etc. in the HTML code itself, by writing something like
Code:
<style type="text/css"> css code;</style>
Or you can tell the HTML to call upon its styles by doing something like this:
Code:
<link rel="stylesheet" type="text/css" href="style.css" />
The same thing applies with Javascript.
Code:
<script type="text/css">code</script>
It's been a very long time since I've written web code, but it seems accurate.
My gaming rig
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 4670 MSI Z87i MSI Radeon HD 7870 2gb 2x4 G.Skill Snipers 
Hard DriveOptical DriveOSMonitor
1TB Seagate ASUS Reader Windows 7 64bit Acer  
KeyboardPowerCaseMouse
Rosewill 850w Rosewill HIVE Semi Modular Bitfenix Prodigy Razorback 
Mouse Pad
Mousepad 
  hide details  
Reply
My gaming rig
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5 4670 MSI Z87i MSI Radeon HD 7870 2gb 2x4 G.Skill Snipers 
Hard DriveOptical DriveOSMonitor
1TB Seagate ASUS Reader Windows 7 64bit Acer  
KeyboardPowerCaseMouse
Rosewill 850w Rosewill HIVE Semi Modular Bitfenix Prodigy Razorback 
Mouse Pad
Mousepad 
  hide details  
Reply
post #3 of 9
CSS I can explain. When the web page is rendered on the client's browser, external files (called style sheets) which contain ONLY CSS, or internal CSS code tells the browser how to render the page. It's useful in making a bunch of pages look the same, because instead of re-writing the rules for each page, you just need a single line linking to the external sheet. No idea how to use Java, C, etc over the web.

EDIT: ^beat me, thats how you link CSS in^
XBMC HTPC
(10 items)
 
Echo One
(17 items)
 
 
CPUMotherboardGraphicsRAM
Phenom II X4 925 MSI 890FXA-GD70 EVGA GT 610 2GB CORSAIR Vengeance 16GB DDR3 1600 
Hard DriveCoolingOSKeyboard
Western Digital Caviar Black 1TB WD1002FAEX  Xigmatek Gaia XBMCBuntu 11.04 Generic Dell crap 
PowerCase
Coolmax 700W Apevia X-Jupiter-Jr Midtower 
CPUMotherboardGraphicsRAM
Intel 4670K MSI Z87 AC ITX MSI GTX 760 ITX G.SKILL Sniper Series 2x8GB 
Hard DriveHard DriveCoolingOS
Samsung 850 Evo Western Digital Caviar Black Stock Intel Heatsink Windows 10 Home 
MonitorMonitorMonitorKeyboard
LG 25UM57 LG IPS226V-PN LG IPS226V-PN Logitech G910 Orion Spark 
CaseMouseMouse PadAudio
EVGA Hadron Hydro Logitech G502 Proteus Core SteelSeries QCK+  Corsair SP2500 
Audio
Corsair Vengeance 2000  
  hide details  
Reply
XBMC HTPC
(10 items)
 
Echo One
(17 items)
 
 
CPUMotherboardGraphicsRAM
Phenom II X4 925 MSI 890FXA-GD70 EVGA GT 610 2GB CORSAIR Vengeance 16GB DDR3 1600 
Hard DriveCoolingOSKeyboard
Western Digital Caviar Black 1TB WD1002FAEX  Xigmatek Gaia XBMCBuntu 11.04 Generic Dell crap 
PowerCase
Coolmax 700W Apevia X-Jupiter-Jr Midtower 
CPUMotherboardGraphicsRAM
Intel 4670K MSI Z87 AC ITX MSI GTX 760 ITX G.SKILL Sniper Series 2x8GB 
Hard DriveHard DriveCoolingOS
Samsung 850 Evo Western Digital Caviar Black Stock Intel Heatsink Windows 10 Home 
MonitorMonitorMonitorKeyboard
LG 25UM57 LG IPS226V-PN LG IPS226V-PN Logitech G910 Orion Spark 
CaseMouseMouse PadAudio
EVGA Hadron Hydro Logitech G502 Proteus Core SteelSeries QCK+  Corsair SP2500 
Audio
Corsair Vengeance 2000  
  hide details  
Reply
post #4 of 9
Thread Starter 
Thanks guys, but how would the code for adding the "Stylesheet" be added to the page if it is generated with PHP? can PHP be used to generate parts of an HTML file, or can you explicitly tell PHP to add a certain piece of HTML code in a certain spot when it is generated?
post #5 of 9
I believe it is the same as in HTML, not sure where on the page though. Never written PHP, but I expect up in the header area like it is with HTML.

EDIT: Found this forum post http://forums.devshed.com/css-help-1...ipt-19084.html which seems to be what you want.
XBMC HTPC
(10 items)
 
Echo One
(17 items)
 
 
CPUMotherboardGraphicsRAM
Phenom II X4 925 MSI 890FXA-GD70 EVGA GT 610 2GB CORSAIR Vengeance 16GB DDR3 1600 
Hard DriveCoolingOSKeyboard
Western Digital Caviar Black 1TB WD1002FAEX  Xigmatek Gaia XBMCBuntu 11.04 Generic Dell crap 
PowerCase
Coolmax 700W Apevia X-Jupiter-Jr Midtower 
CPUMotherboardGraphicsRAM
Intel 4670K MSI Z87 AC ITX MSI GTX 760 ITX G.SKILL Sniper Series 2x8GB 
Hard DriveHard DriveCoolingOS
Samsung 850 Evo Western Digital Caviar Black Stock Intel Heatsink Windows 10 Home 
MonitorMonitorMonitorKeyboard
LG 25UM57 LG IPS226V-PN LG IPS226V-PN Logitech G910 Orion Spark 
CaseMouseMouse PadAudio
EVGA Hadron Hydro Logitech G502 Proteus Core SteelSeries QCK+  Corsair SP2500 
Audio
Corsair Vengeance 2000  
  hide details  
Reply
XBMC HTPC
(10 items)
 
Echo One
(17 items)
 
 
CPUMotherboardGraphicsRAM
Phenom II X4 925 MSI 890FXA-GD70 EVGA GT 610 2GB CORSAIR Vengeance 16GB DDR3 1600 
Hard DriveCoolingOSKeyboard
Western Digital Caviar Black 1TB WD1002FAEX  Xigmatek Gaia XBMCBuntu 11.04 Generic Dell crap 
PowerCase
Coolmax 700W Apevia X-Jupiter-Jr Midtower 
CPUMotherboardGraphicsRAM
Intel 4670K MSI Z87 AC ITX MSI GTX 760 ITX G.SKILL Sniper Series 2x8GB 
Hard DriveHard DriveCoolingOS
Samsung 850 Evo Western Digital Caviar Black Stock Intel Heatsink Windows 10 Home 
MonitorMonitorMonitorKeyboard
LG 25UM57 LG IPS226V-PN LG IPS226V-PN Logitech G910 Orion Spark 
CaseMouseMouse PadAudio
EVGA Hadron Hydro Logitech G502 Proteus Core SteelSeries QCK+  Corsair SP2500 
Audio
Corsair Vengeance 2000  
  hide details  
Reply
post #6 of 9
HTML (HyperText Markup Language) is the language used to create web pages. Your browser knows how to display this language.

PHP and ASP are server side languages which allow you to create more dynamic web pages (ie get data from a backend server).

CSS (cascading style sheets) - used to define the the look and formatting of a markup language like for example HTML. It is most commonly used to STYLE webpages.

javascript is a client side language which allows you to make dynamic changes to the HTML document (it does not communicate with the server).

Java - is a programming language. If a user has Java installed, they are able to see java applets (basically java programs embedded in a web page.



To answer your question. You can add dynamic html code into your html file with php code (for instance based on user input). You can basically add php code anywhere in your html file which outputs desired html (or do other things like connect to a database). This is done on the server and then the final html is sent to the user.
    
CPUMotherboardGraphicsRAM
i7-6700k - 4.5Ghz @ 1.31V Z170 ASUS MAXIMUS VIII HERO Asus Strix 1080 ti @ 2050 / 6054 G.SKILL Ripjaws V Series 16GB 3200 - F4-3200C14... 
Hard DriveHard DriveHard DriveHard Drive
SAMSUNG 850 PRO 256GB SSD Crucial MX200 1TB SSD Crucial MX300 750GB Crucial MX100 512GB SSD 
Optical DriveCoolingOSMonitor
LG GGC-H20L Internal Blu-ray Burner Noctua nh-d14 Windows 10 Pro (64 bit) Acer XB270HU 27" 
MonitorKeyboardPowerCase
BENQ GW2765HT 27"  Logitech G710+ Corsair HX Professional Series 850W 80 Plus NZXT Phantom 630 
MouseMouse PadAudioAudio
Logitech G700 PECHAM Waterproof Gaming Mouse Mat Creative Sound Blaster X-Fi Titanium HD M-AUDIO AV40 
Other
Sennheiser HD 595 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7-6700k - 4.5Ghz @ 1.31V Z170 ASUS MAXIMUS VIII HERO Asus Strix 1080 ti @ 2050 / 6054 G.SKILL Ripjaws V Series 16GB 3200 - F4-3200C14... 
Hard DriveHard DriveHard DriveHard Drive
SAMSUNG 850 PRO 256GB SSD Crucial MX200 1TB SSD Crucial MX300 750GB Crucial MX100 512GB SSD 
Optical DriveCoolingOSMonitor
LG GGC-H20L Internal Blu-ray Burner Noctua nh-d14 Windows 10 Pro (64 bit) Acer XB270HU 27" 
MonitorKeyboardPowerCase
BENQ GW2765HT 27"  Logitech G710+ Corsair HX Professional Series 850W 80 Plus NZXT Phantom 630 
MouseMouse PadAudioAudio
Logitech G700 PECHAM Waterproof Gaming Mouse Mat Creative Sound Blaster X-Fi Titanium HD M-AUDIO AV40 
Other
Sennheiser HD 595 
  hide details  
Reply
post #7 of 9
Quote:
Originally Posted by Jtvd78 View Post
Thanks guys, but how would the code for adding the "Stylesheet" be added to the page if it is generated with PHP? can PHP be used to generate parts of an HTML file, or can you explicitly tell PHP to add a certain piece of HTML code in a certain spot when it is generated?
You would still use HTML to call the CSS.

You can use PHP to generate parts of an HTML file, and you can also tell PHP to add HTML code in a certain spot.

The PHP Include command is awesome for this.

Basically, when you save a webpage as a .php, it is still an HTML file, it just now has the power to communicate with the server and run commands to the server.

You're still going to use HTML for almost everything, PHP just helps you make it more dynamic.

You can use PHP includes to chop a webpage into pieces, such as header, nav menu, footer, content, etc, and then compile them all together in one file using PHP includes for the seperate elements.

Does that answer your question?
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
Ender
(8 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 3820 TPOWER X79 GeForce GTX 570 Corsair 16GB 
Hard DriveCoolingOSPower
Crucial M4 128GB SSD Antec Kuhler 620 Win 7 Seasonic M12 600w 
  hide details  
Reply
post #8 of 9
Yes, you can intersperse PHP code in your html file ( as long as your web servers is interpreting the file extension for php).

Can be some thing like this.


Code:
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script src="code.js" type="text/javascript"></script>
</head>
<body>
  <div>
    <p> <?php echo $myphpvariablesetsomewhereelse; ?> </p>
    <p> This is just plain text </p>
    <h1> <?php echo $onotherphpvar ?> </h1>
  </div>
</body>
</html>
Javascript actually runs IN the users browser and css is applied IN the users browser which is what leads to browser inconsistencies. You usually want to make sure your site is at least useable if not pretty even in the absence of both CSS and JS because you can't truly control that.

So in the above the browser downloads your css rules and then applies them to your page after it downloads. The js file is also downloaded and then your browser can use the code to edit the DOM, create interaction in your page ( drag and drop, click events, etc ). But this all happens in the browser after your page has been accessed by somebody.
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
White TITAN
(16 items)
 
   
CPUMotherboardGraphicsRAM
intel core i7-3770k Asus Z77 Sabertooth EVGA GTX 780 SC ACX Corsair Dominator Platinum 16GB (2x8GB) 
Hard DriveHard DriveHard DriveOptical Drive
Samsung 840 Pro  WD Black Crucial M4 LG Blueray 
CoolingOSMonitorPower
Swiftech H220 (Stock cooler on while RMA :( ) Windows 7 64bit Dell 2311h Ultrasharp x 2 Corsair AX850 
CaseMouseMouse PadAudio
Fractal Design Define R4 White (w/ Window) Logitech G700 Razer Control Edition Sound Blaster ZxR 
CPUMotherboardGraphicsRAM
Intel 980x Asus Rampage iii Extreme EVGA GTX580 SLI Patriot Viper Xtreme 12GB DDR3 2000 (PC3 16000) 
Hard DriveHard DriveHard DriveOptical Drive
120GB Corsair Force Series 3 SSD WD Caviar Black 640GB Crucial M4 128GB SSD LG Black Blu-ray Drive SATA Model UH12LS28 
CoolingCoolingCoolingCooling
XSPC RX360 and RX120 Rads Watercool HeatKiller 3.0 Limited Edition Black ... XSPC Dual Bay Res with Swiftech MCP655 Pump Silver Shining Bitspower Compression Fittings 
CoolingCoolingCoolingCooling
PrimoFlex Pro LRT Black Tubing -1/2in. ID X 3/4in. 3x Gentle Typhoon 120mm Fan 1850RPM (AP-15)  1x Noiseblocker NB-BlackSilentPro PL-2 120mm Ul... Koolance VID-NX580 Full Cover GPU Waterblock x2 
OSMonitorKeyboardPower
Windows 7 Home Premium x64 Dell U2311 Ultrasharp x2 Max Keyboard Nighthawk X8 Semi-Custom - Mechani... Antec High Current Gamer 900W 
CaseMouseMouse PadAudio
Xigmatek Elysium Black Logitech G700 Razer Goliathus Creative Sound Blaster Recon3D Fatal1ty Pro 
  hide details  
Reply
post #9 of 9
Quote:
Originally Posted by glakr View Post
So in the above the browser downloads your css rules and then applies them to your page after it downloads. The js file is also downloaded and then your browser can use the code to edit the DOM, create interaction in your page ( drag and drop, click events, etc ). But this all happens in the browser after your page has been accessed by somebody.
The server runs the file with a php extension and does all the stuff in the php tags, in this case it outputs an html file and then your browser get's it and does all the other stuff. I think myphpvariablesetsomewhereelse and anotherphpvariable would have been passed to it in the URL. eg:

index.php?myphpvariablesetsomewhereelse=more_crap. txt&anotherphpvariable="hey diddle diddle"

So the content of a file called more_crap.txt has been put in the <p></p>
tags and the H1 heading is "hey diddle diddle". I do similar code, I might have a number of divs containing menus and other content
then I have an if loop which determines what content goes where, according to a variable passed in the url. I hold all the content and menus as html in text files; well it varies but most seems to be html . That way I can have loads of pages and menus[and sub menus] all from one page and I can reuse menus and other content.

mysql in a page just means the server runs the php and then when it comes to the mysql it runs it and uses content from the mysql table in the html. Well that's how I use it.

The manuals for php and mysql are very good.
If you want a go with it stick the php triad on your computer. The php triad is apach, php and mysql. I started messing with it ten years ago but have never bothered anymore than simply using it to fill in the content on a page, well I do have a few motorbike parts manuals on php pages[they are created from mysql tables], it's pretty simple.
Edited by integerspin - 5/25/11 at 8:13pm
bigbox
(13 items)
 
  
CPUMotherboardGraphicsRAM
Opteron146 MSi? Quadro FX3500 1 G PC2700 
Hard DriveOptical DriveMonitorPower
320G WD, 10 assorted scsi drives 2 plextor CD drives and a Sony CD drive Compac 21" and a Hanns 19" cheap thing with a blue LED in it 
Case
Dec prioris HX server case 
  hide details  
Reply
bigbox
(13 items)
 
  
CPUMotherboardGraphicsRAM
Opteron146 MSi? Quadro FX3500 1 G PC2700 
Hard DriveOptical DriveMonitorPower
320G WD, 10 assorted scsi drives 2 plextor CD drives and a Sony CD drive Compac 21" and a Hanns 19" cheap thing with a blue LED in it 
Case
Dec prioris HX server case 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Can someone please explain how Website coding really works?