E-LEARNING
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="Z:\Kampus\style.css">
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<div>
<h1><img class="logo"src="Z:/Kampus/elearning-logo.png" width="20%"></h1>
<div class="homemenu"style="text-align: right;">
<a href="Z:\Kampus\tugas.html">HOME</a>
<a href="Z:\Kampus\info-pengumuman.html">INFO&PENGUMUMAN</a>
<a href="Z:\Kampus\artikel.html">ARTIKEL</a>
<a href="Z:\Kampus\forum.html">FORUM</a>
</div>
</div>
</div>
<div class="left-menu">
<div style="border:solid 2px #8c8f91;">
<h2>MENU</h2>
<a href="Z:\Kampus\tugas.html">Home</a>
<br>
<a href="Z:\Kampus\info-pengumuman.html">Info&Pengumuman</a>
<br>
<a href="Z:\Kampus\artikel.html">Artikel Pembelajaran</a>
<br>
<a href="Z:\Kampus\forum.html">Forum Diskusi</a>
</div>
<div style="border:solid 2px #8c8f91">
<form name="a" onsubmit="return kirim()" action="login.html">
<h2>LOGIN</h2>
<p style="text-align: left;padding-left: 75px;margin-bottom: 0px;">NIM/ID:</p>
<input type="text" name="nama" required="" placeholder="NIM/ID">
<p style="text-align: left;padding-left: 75px;margin-bottom:
0px;">PASSWORD:</p>
<input type="password" name="password" placeholder="PASSWORD">
<br>
<input class="button"type="submit" name="enter" value="LOGIN">
</form>
<script type="text/javascript">
function kirim(){
var n = document.forms["a"]["nama"].value;
var m = document.forms["a"]["password"].value;
if(n=="kojiro"& m=="cikaludel"){
return true;
} else {
return false;
}
}
</script>
</div>
</div>
<div class="main-content">
<h2>JADWAL MATA KULIAH</h2>
<input type="text" name="search2" placeholder="search">
<input class="button" type="submit" name="search3" value="GO">
<table align="center">
<tr>
<th>NO.</th>
<th>WAKTU</th>
<th>KODE</th>
<th>MATA KULIAH</th>
<th>KELAS</th>
</tr>
<tr>
<td>1.</td>
<td>19:00</td>
<td>170030</td>
<td>Matematika</td>
<td>JA163</td>
</tr>
<tr>
<td>2.</td>
<td>16:00</td>
<td>110030</td>
<td>Inggris</td>
<td>JB173</td>
</tr>
<tr>
<td>3.</td>
<td>10:00</td>
<td>170123</td>
<td>Indonesia</td>
<td>JF163</td>
</tr>
<tr>
<td>4.</td>
<td>13:30</td>
<td>294638</td>
<td>Perancangan Web</td>
<td>JA123</td>
</tr>
<tr>
<td>5.</td>
<td>21:00</td>
<td>205905</td>
<td>Dansa</td>
<td>JE163</td>
</tr>
</table>
<h2>Quote by.AXL</h2>
<p><span>SAYA MENGERJAKAN TUGAS INI DENGAN JUJUR DAN TIDAK
MENCOTEK SIAPAPUN BAPAK JUGA TAU SAYA TIDAK MUNGKIN MENYONTEK
KARENA SAYA ORANG NYA SUKA BERBAGI ILMU TETAPI BEDAKAN BERBAGI
ILMU DENGAN BERBAGI JAWABAN.</span><br>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div class="right-menu">
<div style="border:solid 2px #8c8f91;">
<h2>KURIKULUM</h2>
<a href="">S1-Sistem Komputer</a>
<br>
<a href="">S1-Sistem Informasi</a>
<br>
<a href="">D3-Manajemen Informatika</a>
</div>
<div style="border:solid 2px #8c8f91;">
<h2>LINKS</h2>
<a href="">stikom-bali.ac.id</a>
<br>
<a href="">sion.stikom-bali.ac.id</a>
<br>
<a href="">alumni.stikom-bali.ac.id</a>
</div>
</div>
<div class="footer">
<footer class="footer1">
<p class="footer-line" style="text-align: center;">Tugas Web</p>
<p class="footer-name" style="text-align: center;">Cv.Axl Kojiro
©2018</p>
</footer>
</div>
</div>
</body>
</html>
INFO&PENGUMUMAN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Z:\Kampus\style.css">
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<div>
<h1><img class="logo"src="Z:/Kampus/elearning-logo.png"
width="20%"></h1>
<div class="homemenu"style="text-align: right;">
<a href="Z:\Kampus\tugas.html">HOME</a>
<a href="Z:\Kampus\info-
pengumuman.html">INFO&PENGUMUMAN</a>
<a href="Z:\Kampus\artikel.html">ARTIKEL</a>
<a href="Z:\Kampus\forum.html" style="padding-right:
40px;">FORUM</a>
</div>
</div>
</div>
<div class="left-menu">
</div>
<div class="main-content">
<h1>INFO</h1>
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
<h1>PENGUMUMAN</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
ARTIKEL
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Z:\Kampus\style.css">
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<div>
<h1><img class="logo"src="Z:/Kampus/elearning-logo.png"
width="20%"></h1>
<div class="homemenu"style="text-align: right;">
<a href="Z:\Kampus\tugas.html">HOME</a>
<a href="Z:\Kampus\info-
pengumuman.html">INFO&PENGUMUMAN</a>
<a href="Z:\Kampus\artikel.html">ARTIKEL</a>
<a href="Z:\Kampus\forum.html" style="padding-right:
40px;">FORUM</a>
</div>
</div>
</div>
<div class="left-menu"></div>
<div class="main-content">
<h1>ARTIKEL</h1>
<p><span>A. KONSEP DASAR SISTEM</span><br>
Suatu sistem pada dasarnya adalah sekolompok unsur yang erat hubungannya satu dengan yang
lain, yang berfungsi bersama-sama untuk mencapai tujuan tertentu.Secara sederhana, suatu
sistem dapat diartikan sebagai suatu kumpulan atau himpunan dari unsur, komponen, atau
variabel yang terorganisir, saling berinteraksi, saling tergantung satu sama lain, dan terpadu. Dari
defenisi ini dapat dirinci lebih lanjut pengertian sistem secara umu, yaitu :<br><br>
<span>1.</span> Setiap sistem terdiri dari unsur-unsur<br>
<span>2.</span> Unsur-unsur tersebut merupakan bagian terpadu sistem yang
bersangkutan.<br>
<span>3.</span> Unsur sistem tersebut bekerja sama untuk mencapai tujuan sistem.<br>
<span>4.</span> Suatu sistem merupakan bagian dari sistem lain yang lebih besar.<br><br>
<span>B. KONSEP DASAR INFORMASI</span><br>
Secara umum informasi dapat didefinisikan sebagai hasil dari pengolahan data dalam suatu
bentuk yang lebih berguna dan lebih berarti bagi penerimanya yang menggambarkan suatu
kejadian-kejadian yang nyata yang digunakan untuk pengambilan keputusan. Informasi
merupakan data yang telah diklasifikasikan atau diolah atau diinterpretasi untuk digunakan
dalam proses pengabilan keputusan.<br><br>
<span>C. KONSEP DASAR SISTEM INFORMASI</span><br>
Sistem informasi adalah suatu sistem dalam suatu organisasi yang mempertemukan kebutuhan
pengolahan transaksi harian yang mendukung fungsi operasi organisasi yang bersifat manajerial
dengan kegiatan strategi dari suatu organisasi untuk dapat menyediakan kepada pihak luar
tertentu dengan informasi yang diperlukan untuk pengambilan keputusan. Sistem informasi
dalam suatu organisasi dapat dikatakan sebagai suatu sistem yang
menyediakan informasi bagi semua tingkatan dalam organisasi tersebut kapan saja diperlukan.
Sistem ini menyimpan, mengambil, mengubah, mengolah dan mengkomunikasikan informasi
yang diterima dengan menggunakan sistem informasi atau peralatan sistem lainnya.</p>
<span>1. Orang</span><br>
Orang atau personil yang di maksudkan yaitu operator komputer, analis sistem, programmer,
personil data entry, dan manajer sistem informasi/EDP<br><br>
<span>2. Prosedur</span><br>
Prosedur merupakan elemen fisik. Hal ini di sebabkan karena prosedur disediakan dalam bentuk
fisik seperti buku panduan dan instruksi. Ada 3 jenis prosedur yang dibutuhkan, yaitu instruksi
untuk pemakai, instruksi untuk penyiapan masukan, instruksi pengoperasian untuk karyawan
pusat komputer.<br><br>
Pengelola sistem informasi terorganisasi dalam suatu struktur manajemen. Oleh karena itu
bentuk atau jenis sistem informasi yang diperlukan sesuai dengan level manajemennya.<br><br>
<span>•</span> Manajemen Level Atas: untuk perencanaan strategis, kebijakan dan
pengambilan keputusan.<br>
<span>•</span> Manejemen Level Menengah: untuk perencanaan taktis dan pengambilan
keputusan.<br>
<span>•</span> Manejemen Level Bawah: untuk perencanan dan pengawasan operasi dan
pengambilan keputusan.
<br>
<span>•</span> Operator: untuk pemrosesan transaksi dan merespon permintaan.<br><br>
Kemudian pada perkembangannya, dengan semakin besarnya lingkup sebuah sistem informasi
memerlukan adanya penataan kembali personel dengan baik terutama pada struktur manajemen
organisasi personil. Lihat contoh penataan struktur organisasi pada departemen Sistem Informasi
pada gambar 2.4. Tetapi struktur organisasi seperti pada gambar tersebut dapat dimodifikasi
sesuai dengan kondisi real perusahaan.Variasi struktur manajemen tersebut sangat tergantung
pada Managerial Efficiency yang dibandingkan dengan tingkat User Service.<br><br>
Manajemen sumber daya manusia perlu dilakukan dengan benar agar sistem informasi dapat
berjalan dengan baik. Hal itu dilakukan untuk mengurangi terjadinya kesalahan-kesalahan yang
bersifat manusiawi yang dapat mengurangi mutu informasi yang dihasilkan sebuah sistem.
<br><br>
Kesulitan karena kesalahan dapat diatasi dengan dua teknik yaitu pengontrolan data dan
penambahan batas kepercayaan pada data. Pengontrolan secara intern dapat dilakukan untuk
menemukan kesalahan-kesalahan yang terjadi. Selain itu perlu juga dilakukan pemeriksaan
auditing baik secara intern maupun ekstern.
</p>
<h2>PENGEMBANGAN SISTEM INFORMASI</h2>
<p>Pengembangan sistem dapat berati menyusun suatu sistem yang baru untuk menggantikan
sistem yang lama secara keseluruhan atau memperbaiki sistem telah ada. Sistem yang lama perlu
diperbaiki/diganti disebabkan beberapa hal, yaitu :<br><br>
Pengembangan sistem informasi yang berbasis komputer dapat merupakan tugas kompleks yang
membutuhkan banyak sumber daya dan dapat memakan waktu yang lama untuk
menyelesaikannya.<br><br>
</div>
</div>
</body>
</html>
FORUM
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Z:\Kampus\style.css">
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<div>
<h1><img class="logo"src="Z:/Kampus/elearning-logo.png"
width="20%"></h1>
<div class="homemenu"style="text-align: right;">
<a href="Z:\Kampus\tugas.html">HOME</a>
<a href="Z:\Kampus\info-
pengumuman.html">INFO&PENGUMUMAN</a>
<a href="Z:\Kampus\artikel.html">ARTIKEL</a>
<a href="Z:\Kampus\forum.html" style="padding-right:
40px;">FORUM</a>
</div>
</div>
</div>
<div class="left-menu"></div>
<div class="main-content">
<h1>FORUM</h1>
<p style="text-align: center;">Silahkan Pilih Nilai untuk Website yang saya buat</p>
<table align="center">
<tr>
<th>NO.</th>
<th>BAGIAN</th>
<th>BIASA</th>
<th>BAGUS</th>
<th>LAKAD MATATAG</th>
</tr>
<tr>
<td>1.</td>
<td>CODE HTML</td>
<td><input type="radio" name="a" value="1"></td>
<td><input type="radio" name="a" value="2"></td>
<td><input type="radio" name="a" value="3"></td>
</tr>
<tr>
<td>2.</td>
<td>CODE CSS</td>
<td><input type="radio" name="b" value="1"></td>
<td><input type="radio" name="b" value="2"></td>
<td><input type="radio" name="b" value="3"></td>
</tr>
<tr>
<td>3.</td>
<td>DESIGN</td>
<td><input type="radio" name="c" value="1"></td>
<td><input type="radio" name="c" value="2"></td>
<td><input type="radio" name="c" value="3"></td>
</tr>
<tr>
<td>4.</td>
<td>RESPONSIVE</td>
<td><input type="radio" name="d" value="1"></td>
<td><input type="radio" name="d" value="2"></td>
<td><input type="radio" name="d" value="3"></td>
</tr>
<tr>
<td>5.</td>
<td>CREATIVITAS</td>
<td><input type="radio" name="e" value="1"></td>
<td><input type="radio" name="e" value="2"></td>
<td><input type="radio" name="e" value="3"></td>
</tr>
</table>
<input class="button" type="submit" name="search3" value="SUBMIT">
</div>
<div class="right-menu"></div>
</div>
</body>
</html>
CSS
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.container{
display: grid;
grid-template-columns: repeat(12,1fr);
}
.header{
grid-column: span 12;
background-image: url();
background-size: cover;
background-color: rgb(41, 44, 47,0.6);
margin-bottom: 30px;
border-bottom: solid 1px #8c8f91;
}
.left-menu{
grid-column: span 3;
}
.main-content{
grid-column: span 6;
}
.right-menu{
grid-column: span 3;
}
.footer{
grid-column: span 12;
margin-top: 30px;
}
body{
background-color: rgb(41, 44, 47);
text-align: center;
background-image: url("Z:/Kampus/pixta_41332794_M.jpg");
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
.logo{
float:left;
padding-left: 30px;
padding-bottom: 20px;
}
table{
width: 90%;
background-color: rgb(41, 44, 47,0.9);
margin-top: 20px;
border:solid 2px #292c2f;
border-radius: 12px;
}
td,th,tr{
padding: 15px 20px;
border:solid 2px #8c8f91;
border-radius: 12px;
}
div.left-menu div,.right-menu div,.main-content h2,.main-content p,.main-content h1{
background-color: rgb(41, 44, 47,0.9);
border-radius: 40px;
margin: 20px;
padding-bottom: 10px;
}
a{
padding: 10px 5px;
text-decoration: none;
}
p{
text-align: left;
}
p,tr,td{
color: #45e9f2;
font: normal 18px sans-serif;
padding: 10px;
}
h2,th,a,h1{
color: #13607c;
font: normal 18px sans-serif;
}
.main-content h1,.main-content h2,.main-content p,.info-pengumuman h1,.info-pengumuman p{
border: solid 2px #8c8f91;
padding:20px;
}
span{
color: #13607c;
}
a:hover{
font-size: 20px;
color:#45e9f2;
}
input[type=submit] {
background-color: rgb(41, 44, 47,0.9);
color: #8c8f91;
padding: 10px 25px;
margin: 10px 0px;
border: solid 2px #8c8f91;
border-radius: 12px;
}
input[type=text],input[type=password]{
padding: 10px 10px;
display: inline-block;
border: 2px solid #8c8f91;
border-radius: 12px;
}
input[type=submit]:hover {
background-color: rgb(41, 44, 47,0.9);
color: #13607c;
padding: 10px 25px;
border: solid 2px #13607c;
border-radius: 12px
}
.homemenu{
padding-top: 90px;
}
.homemenu a{
padding-right: 60px;
}
.footer{
border-top: solid 1px #8c8f91;
background-color: rgb(41, 44, 47,0.9);
width: 100%;
padding: 25px;
}
.footer1 .footer-line{
background-color: transparent;
color: #13607c;
font-size: 24px;
margin: 0;
}
.footer1 .footer-name{
background-color: transparent;
color: #13607c;
font-size: 14px;
margin: 0;
}