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;
}
#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;
}
?>
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.
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.
Copyright
© W3Schools.com
</body>
</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>
li><a
href=”nav.html”>Home</a></lidingnya)
·
Home
·
News
·
Contact
·
About
Biodata
<img
src=”012.jpg” width=”200px” height=”200px”>
<p>
Nama : Muhammad Fajar Prasetia<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Tiban Koperasi<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.
Copyright
© W3Schools.com
</body>
</html>
Untuk gambarnya, bisa kita rubah dengan yang kita mau.
PERTEMUAN 5 & 6
(File Connection)
<?php
// Algoritma dan Pemrograman WEB, By.Muhammad fajar prasetia, 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, ‘qwerty’);
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>
·
Home
·
News
·
Contact
·
About
Biodata
<img
src=”file:///C|/AppServ/www/012.jpg” width=”200px” height=”200px”>
<p>
Nama : Muhammad fajar Prasetia<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Tiban Koperasi<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>
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;
}
simpan dengan nama style.css
Nama : MUHAMMAD FAJAR PRASETIA
NPM : 1310128262089
kls : V A
