PEMROGAMAN WEB
PERTEMUAN
1 & 2
Disini
saya akan lampirkan tugas – tugas saya di kampus dan ini adalah tugas 1 & 2
saya.
Yang pertama buat las nama file
Pertemuan 1 & 2
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-image: url(images/galerycity1.jpg);
color:red; text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:green;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
background-color:#369;
height:290px;
width:1203px;
float:left;
padding:10px;
<html>
<head>
<style>
#header {
background-image: url(images/galerycity1.jpg);
color:red; text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:green;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
background-color:#369;
height:290px;
width:1203px;
float:left;
padding:10px;
}
#footer {
background-image: url(images/abu.jpg);
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
________________________________________
<body>
#footer {
background-image: url(images/abu.jpg);
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
________________________________________
<body>
City Gallery
London
Paris
Tokyo
<?php
$page = (isset($_GET[‘page’]))? $_GET[‘page’] : “main”;
switch ($page) {
case ‘Paris’ : include “paris.php”; break;
case ‘Tokyo’ : include “tokyo.php”; break;
}
?>
$page = (isset($_GET[‘page’]))? $_GET[‘page’] : “main”;
switch ($page) {
case ‘Paris’ : include “paris.php”; break;
case ‘Tokyo’ : include “tokyo.php”; break;
}
?>
London
London is the capital city of
England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames,
London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
its history going back to its founding by the Romans, who named it Londinium.
Copyright
© W3Schools.com
</body>
</html>
</html>
PERTEMUAN 3 & 4
Berikut
adalah hasil tugas 3 & 4 yang telah di selesaikan
Pertama kita akan membuat file css. simpan dengan nama style.css
#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:150px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}
Setelah itu, lalu kita membuat file dengan nama nav.html
<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”style.css”></head>
<body>
Pertama kita akan membuat file css. simpan dengan nama style.css
#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:150px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}
Setelah itu, lalu kita membuat file dengan nama nav.html
<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”style.css”></head>
<body>
li><a
href=”nav.html”>Home</a></lidingnya)
· Home
· News
· Contact
· About
Biodata
<img
src=”012.jpg” width=”200px” height=”200px”>
<p>
Nama : Meydi Gilang Pratama<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Sei Harapan<br/>
Hoby : sport<br/> </p>
<hr>
<p align=”justify”>
no comment
</p>
</div>
li><a href=”nav.html”>Menu/a></li> (contoh codingnya)
<p>
Nama : Meydi Gilang Pratama<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Sei Harapan<br/>
Hoby : sport<br/> </p>
<hr>
<p align=”justify”>
no comment
</p>
</div>
li><a href=”nav.html”>Menu/a></li> (contoh codingnya)
· Menu 5
· Menu 6
· Menu 7
· Menu 8
LONDON
London is
the capital and most populous city of England and the United Kingdom.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
London’s ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2)
medieval boundaries and in 2011 had a resident population of 7,375,
making it the smallest city in England. Since at least the 19th century,
the term London has also referred to the metropolis developed around this core.
The bulk of this conurbation forms Greater London,a region of England governed by the Mayor of London and the London Assembly.The conurbation also covers two English counties, the City of London and the county of Greater London,though historically it was split between the City, Middlesex, Essex, Surrey, Kent and Hertfordshire.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
London’s ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2)
medieval boundaries and in 2011 had a resident population of 7,375,
making it the smallest city in England. Since at least the 19th century,
the term London has also referred to the metropolis developed around this core.
The bulk of this conurbation forms Greater London,a region of England governed by the Mayor of London and the London Assembly.The conurbation also covers two English counties, the City of London and the county of Greater London,though historically it was split between the City, Middlesex, Essex, Surrey, Kent and Hertfordshire.
Copyright
© W3Schools.com
</body>
</html>
Untuk gambarnya, bisa kita rubah dengan yang kita mau.
</html>
Untuk gambarnya, bisa kita rubah dengan yang kita mau.
PERTEMUAN 5 & 6
(File Connection)
<?php
// Algoritma dan Pemrograman WEB, By.Meydi Gilang Pratama, 2015
// Teknik Informatika – STT Ibnu Sina Batam
// Set up koneksi kedatabase sesuai dengan user id dan password aplikasi
define(MYSQL_HOST, ‘localhost’);
define(MYSQL_USER, ‘root’);
define(MYSQL_PASS, ‘root’);
define(MYSQL_DB, ‘db_pweb’);
// If we fail to connect, we cant keep going, so we exit
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS);
//$db=mysql_select_db(“csci”) or die(mysql_error());
if (!$db)
{
die(‘<br />Tidak Terhubung KeDatabase “‘ . MYSQL_HOST . ‘”.’);
}
else
{
//echo ‘Connected to MySQL server ‘ . MYSQL_HOST . ‘ as user ‘ . MYSQL_USER .
‘<br/>’;
mysql_select_db(MYSQL_DB);
}
// Calls to MySQL functions go here…
?>
// Algoritma dan Pemrograman WEB, By.Meydi Gilang Pratama, 2015
// Teknik Informatika – STT Ibnu Sina Batam
// Set up koneksi kedatabase sesuai dengan user id dan password aplikasi
define(MYSQL_HOST, ‘localhost’);
define(MYSQL_USER, ‘root’);
define(MYSQL_PASS, ‘root’);
define(MYSQL_DB, ‘db_pweb’);
// If we fail to connect, we cant keep going, so we exit
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS);
//$db=mysql_select_db(“csci”) or die(mysql_error());
if (!$db)
{
die(‘<br />Tidak Terhubung KeDatabase “‘ . MYSQL_HOST . ‘”.’);
}
else
{
//echo ‘Connected to MySQL server ‘ . MYSQL_HOST . ‘ as user ‘ . MYSQL_USER .
‘<br/>’;
mysql_select_db(MYSQL_DB);
}
// Calls to MySQL functions go here…
?>
simpan dengan nama file
koneksi.php
(File NAV)
<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”file:///C|/AppServ/www/style.css”></head>
<body>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”file:///C|/AppServ/www/style.css”></head>
<body>
· Home
· News
· Contact
· About
Biodata
<img
src=”file:///C|/AppServ/www/012.jpg” width=”200px” height=”200px”>
<p>
Nama : Meydi Gilang Pratama<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Sei Harapan<br/>
Hoby : Sport<br/> </p>
<hr>
<p align=”justify”>
no comment </p>
</div>
<p>
Nama : Meydi Gilang Pratama<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Sei Harapan<br/>
Hoby : Sport<br/> </p>
<hr>
<p align=”justify”>
no comment </p>
</div>
<li><a
href=”file:///C|/AppServ/www/search.php”>Search STUDENT</a></li>
(contoh codingnya)
Mahasiswa
Copyright
© W3Schools.com
</body>
</html>
</html>
simpan dengan nama nav.php
(File CSS)
#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:120px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:120px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}
simpan dengan nama style.css
