UAS PEMROGRMAN WEB

Nama : Saoman
NIM : 201401251024
Prodi : Teknik Informatika
Matkul : WEB

CARA MEMBUAT WEB HTML

Untuk mampu membuat website dengan baik, maka otomatis anda perlu menguasai bahasa pemrograman. Ini adalah tools yang memberikan anda kemampuan untuk menentukan fungsi-fungsi dari setiap fungsi yang ada di halaman-halaman website anda nantinya.

Untuk mampu membuat website yang sederhana setidaknya ada pengetahuan dasar yang harus anda miliki, yaitu HTML, PHP, dan MySQL. Setiap pengetahuan ini mempunyai fungsinya masing-masing.

HTML: Dengan mengetahui HTML maka anda akan bisa dengan mudah mengatur tampilan desain kolom dari halaman-halaman website anda.
PHP: Dengan menguasai PHP, maka anda akan tahu cara membuat website anda mempunyai fungsi-fungsi yang sangat luas; baik itu bagaimana cara memanggil dan menampilkan data, membuat fungsi pengolahan data; dan fungsi-fungsi lainnya, yang sudah barang tentu akan terlalu banyak untuk disebutkan di sini.
MySQL: Dengan menguasai MySQL anda akan mengetahui bagaimana cara mengorganisir database dari website anda sehingga website anda bisa menjadi interface bagi anda untuk menyimpan dan mengambil data dengan benar dari database.

Jadi 3 pengetahuan di atas adalah pengetahuan dasar bagi anda untuk membuat website sederhana. Untuk mengetahui cara membuat website yang menarik di mata pengunjung dan mempunyai fungsi-fungsi tambahan yang lebih luas, anda bisa mempelajari CSS dan javascript.

1. Kita buat form login seperti ini dengan code igniter.

yang saya dapat dari https://www.onphpid.com/membuat-form-login-dengan-bootstrap-dan-php.html
atau langsung bisa di download

Download

2. Selanjutnya, Kita daftar di salah satu hosting gratis, sebagai demo saya memakai000webhost.com Silahkan SingUp jika belum punya account web tersebut.

3. Setelah itu silahkan verifikasi email terlebih dahulu.

4. Oke, Next Klik Manage untuk membuat website baru.

5. Masukan ID & Password yang anda inginkan.

6. Kemudian, klik upload ownwebsite

7. Upload file Login-bootstrap-master.zip yang sudah di download.

8. Lalu Extrack File tersebut

9. Buka file Login-bootstrap-master yang sudah anda extrack, kemudian copy seluruh file dan pindahkan ke dalam public_html

10. Setelah itu, untuk melihat hasilnya anda dapat melihatnya dengan cara mengujungi website yang sudah anda buat sebelumnya, contoh : koiwai.000webhostapp.com

11. buka kembali https://www.000webhost.com/ dan klik Manage Databse, untuk membuat database baru.

12. Kemudian isi ID, database, dan password yang anda inginkan.

14. Kemudian silahkan login pada PHPMYADMIN dengan ID & Password yang telah anda buat.
15. Setelah itu silahkan extrack kembali file Login bootstrap yang sudah anda download didalam pc anda, kemudian buka file 'users'.

16. Dan ganti nama database nya dengan nama database anda.

17. Setelah itu kembali ke 'Manage Database' dan klik "Manage" dan pilih PHPMYADMIN.

18. Kemudian klik database anda, dan pilih imports.

19. Dan arahkan kepada file 'users' yang telah kamu edit.
20. Sesudah itu kita buka kembali 'config.php' dan edit sesuai dengan DBName, DBUser, DBHost.

21. Dan Save, DAN LIHAT HASILNYA hehe ;)

Codingan Menu Utama:
<!DOCTYPE html>
<html>
<head>
<title>Home - Website UNIKU</title>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}

Body {
background-color: white;
}

header{
padding: 1px;
margin-bottom: 1px;
color: Blue ;
background-color: yellow;
clear: left;
text-align: center;
}

footer {
padding: 3px;
color: Blue ;
background-color: yellow;
clear: left;
text-align: center;
font-size: 13px;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-weight:normal;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
line-height: 1;

}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
background:#009ae1;
z-index:100;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
padding: 14px 25px 14px 20px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
color:#FFF;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #009ae1;
background-color:#333;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
position: absolute;
top: 21px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
border-color:#009ae1;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
right: 0;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: height .2s ease;
-moz-transition: height .2s ease;
-ms-transition: height .2s ease;
-o-transition: height .2s ease;
transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
height: 32px;
z-index:500;
}
#cssmenu ul ul li a:hover {
background-color:#444;
}
#cssmenu ul ul li a {
padding: 10px 20px;
width: 250px;
font-size: 12px;
background:#333;
text-decoration: none;
color: #dddddd;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color:#ffffff;
}
#cssmenu ul ul li.has-sub > a::after {
position: absolute;
top: 13px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
content: "";
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
right: auto;
left: 10px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
border-color:#ffffff;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul,
#cssmenu.align-right ul ul {
text-align: left;
}
#cssmenu ul li,
#cssmenu ul ul li,
#cssmenu ul li:hover > ul > li {
width: 100%;
height: auto;
border-top: 1px solid rgba(120, 120, 120, 0.15);
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
}
#cssmenu > ul > li,
#cssmenu.align-center > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu ul ul li a {
padding: 20px 20px 20px 30px;
font-size: 12px;
color:#000000;
background:none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000000;
}
#cssmenu ul ul ul li a {
padding-left: 40px;
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
right: auto;
width: 100%;
margin: 0;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
#menu-line {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 20px;
color: #000000;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
}
#cssmenu #menu-button::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 15px;
height: 2px;
background: #000000;
}
#cssmenu #menu-button::before {
content: '';
position: absolute;
top: 25px;
right: 20px;
display: block;
width: 15px;
height: 3px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#cssmenu .submenu-button {
position: absolute;
z-index: 10;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.15);
height: 52px;
width: 52px;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: '';
position: absolute;
top: 21px;
left: 26px;
display: block;
width: 1px;
height: 11px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button::before {
content: '';
position: absolute;
left: 21px;
top: 26px;
display: block;
width: 11px;
height: 1px;
background:#000000;
z-index: 99;
}
#cssmenu .submenu-button.submenu-opened:after {
display: none;
}
}

#menu-wrap{
width:100%;
height:40px;
border-bottom:#CCC 1px solid;
background-repeat:repeat-x;
background-color:#00458A;
}
#menu-wrap.stick {
position:fixed;
top: 0;
z-index: 200;
}
#inner-menu{
width:1300px;
height:41px;
color:#FFF;
margin:auto;
}

article {
margin-left: 0px;
border-left: 1px solid gray padding: 1em;
overflow: hidden;
}

#sidebar {
float: left;
width: 40%;
height: 400px;
background-color: #00458A;
}

#slideshow {
width:100%;
height:500px;
background-color:#00458A;
margin:0 auto;
}

#slideshow img {
display:block;
width:100%;
height:500px;
}

</style>
</head>
<body>

<div class="container">
<header>
<img src="unikupng.png" align="margin-top" style="width:180px;height:150px;" >

<h2>UNIKU</h2>
<h3>Universitas Kuningan</h3>
<h4> Jalan Cut Nyak Dien No 36 A, kel.Cijoho, Cijoho, Kuningan Sub-District, Kuningan Regency, West Java 45513</h4>
</header>

<div id="sticky-anchor"></div>
<div id="menu-wrap">
<div id="inner-menu">
<div id='cssmenu'>
<ul>
<li class="active"><a href="halamanutama.html">Utama</a></li>

<li class="has-sub"><a href="sejarah.html">Sejarah</a></li>
<li class="has-sub"><a href="Berita.html">Berita</a></li>
<li class="has-sub"><a href="Organisasi.html">Organisasi</a>

<ul>
<li><a href="bem.html">BEM</a></li>
<li><a href="bpm.html">BPM</a></li>
</ul>
</li>
<li class="has-sub"><a href="gallery.html">Gallery Kegiatan</a></li>
<li class="has-sub"><a href="akademik.html">Akademik</a></li>
<li class="has-sub"><a href="Contact.html">Contact</a></li>
<li class="has-sub"><a href="Pendaftaran.html">Pendaftaran Mahasiswa Baru (PMB)</a></li>

</ul>
</div>
</div>
</div>

<div id="slideshow">
<script type="text/javascript">
//<![CDATA[
(function() {
var container = document.getElementById('slideshow');
var slide = [
"Uniku1.jpg",
"Uniku2.jpg",
"Uniku3.jpg",
"unikupng.png"
];
var count = 0;
setInterval(function() {
container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
count++;
if (count == slide.length) {
count = 0;
}
}, 5000); // Untuk lima detik sekali (silahkan ubah waktu slide gambar)
})();
//]]>
</script>
</div>

<article>
Universitas Kuningan adalah salah satu Perguruan Tinggi Swasta Kabupaten Kuningan, Jawa Barat. Wikipedia
Alamat: Jalan Cut Nyak DIen No 36 A, Kel. Cijoho, Cijoho, Kuningan Sub-District, Kuningan Regency, West Java 45513
Telepon: (0232) 873696
Rektor: H.Iskandar Hasan
Jenis: Perguruan Tinggi Swasta
Provinsi: Jawa Barat
Didirikan: 6 Juni 2003

<footer>Saoman@TI14/201401251024</footer>

</div>
</body>

</html>

Untuk lihat Download Klik Nama ini Saoman

Untuk melihat lebih lengkapnya bisa buka link di bawah ini
Ket :

username : admin
password : admin

Untuk liyat web saya klik saomanuniku.000webhostapp.com

Search This Blog

Tugas UAS