CLOUDY DRIVE-APLIKASI

Tugas Proyek Akhir Semester
Pemrograman Internet
CLOUDY DRIVE
APLIKASI PENYIMPANAN FILE VIA CLOUD COMPUTING
Oleh :
Mafatikhul Ilmi
1203121023
TEKNIK TELEKOMUNIKASI
DEPARTEMEN ELKTRO
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

CLOUDY DRIVE
APLIKASI PENYIMPANAN FILE VIA CLOUD COMPUTING
I. TUJUAN
Tujuan dari pembuatan aplikasi ini untuk memenuhi tugas proyek akhir dari mata
kuliah Pemrograman Internet serta sebagai upaya untuk mengetahui tingkat pemahaman
mahasiswa terhadap mata kuliah Pemrograman Internet.
II. DASAR TEORI
2.1 HTML (Hypertext Markup Language)
HyperText Markup Language (HTML) adalah sebuah bahasa markahyang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam
sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam
berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan
kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam
format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut denganSGML (Standard Generalized Markup Language), HTML
adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi
Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989
(CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Hyper Text Markup Language (HTML) merupakan protokol yang digunakan untuk
mentransfer data atau document dari web server ke browser kita (Internet Explorer,
Netscape Navigator, NeoPlanet, dll). HTML inilah yang memungkinkan Anda menjelajah
internet dan melihat halaman web yang menarik.
Sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang
digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver,
Adobe GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui dasar-
dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena walaupun
software-software tersebut semakin menawarkan kemudahan dalam membuat halaman

web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara
manual. Terutama untuk halaman web yang sangat kompleks.
2.1.1 Struktur dasar HTML
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang
digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode
HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag>
dan diakhiri dengan </namatag> (terdapat tanda "/"). Sebuah halaman web minimal
mempunyai empat buat tag, yaitu : <HTML> Sebagai tanda awal dokumen HTML.
<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag
TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. <TITLE> Sebagai titel atau
judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas
browser Anda (pada title bar).
Contoh :
<TITLE>Tips HTML -- www.klik-kanan.com</TITLE>
<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute
seperti warna latar belakang, warna teks, warna link, warna visited
link, warna active link dan lain-lain.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN &
TOPMARGIN.
Contoh :
<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF"
link="#FF0000" vlink="FFFF00" alink="#0000FF">
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" background="images/gambar1.gif"
text="#FF0000">
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
2.2 CSS (Cascading Stylesheet)
2.2.1 Pengertian CSS :
 Fitur untuk membuat dynamic HTML.
 Style sheet mendeskripsikan bagaimana tampilan document HTML di layar
(template)
 Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan
italic dan berwarna biru)

 Mendukung ke semua browser.
2.2.2 Aturan penulisan :
 Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green;
 Nama property bersifat case sensitive.
color : green
property : color
value : Green
2.2.3 Cara penggunaan CSS :
 External Style Sheet
Bentuk :
<link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
 <link, merupakan tag pembuka diakhiri dengan tanda “>”
 rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
 type=“text/css”, file yang dipanggil berupa css
 href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
 Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>
 Inline Style sheet
Inline Stylesheet dituliskan di dalam property html secara langsung.
2.3 PHP (Hypertext Preprocessor) dan MYSQL
PHP merupakan akronim dari ”PHP : Hypertext Presprocessor”. PHP merupakan
bahasa script yang biasa digunakan untuk web development yang dapat diselipkan dalam
HTML. Berbeda dengan script-script lainnya seperti Java Script atau VB script, PHP
dieksekusi di lingkungan server, client hanya menerima hasil dari script yang telah
dieksekusi, tanpa bisa mengetahui kode yang digunakan.
PHP difokuskan pada scripting server-side, jadi Anda dapat melakukan apa yang bisa
dilakukan CGI dengan menggunakan PHP seperti mengambil data inputan form,meng-

generate konten halaman dinamis, mengirim dan menerima cookies dan masih banyak lagi.
Kemampuan dan supportnya untuk database juga sangat dapat diandalkan. Sekarang ini,
PHP bahkan dikembangkan untuk menjadi bahasa pemrograman. Untuk lebih jelasnya,
Anda dapat mencari informasi lebih lanjut di distro-distro Linux keluaran baru.
Awalnya, PHP bekerja di lingkungan Linux, karena merupakan ’turunan’ bahasa
PEARL yang merupakan bahasa pemrograman native di lingkungan Linux dan Unix.
Namun seiring perkembangan dan kebutuhan maka PHP dibuat secara cross platform. PHP
dapat bekerja di lingkungan Windows maupun Linux. PHP mengeksekusi server script
lebih cepat dari server script manapun. PHP menempati ranking pertama dalam hal
kecepatan eksekusi, diikuti oleh ASP dan JSP.
2.4 TUTORIAL WEB HOSTING
Agar supaya suatu web dapat di akses oleh banyak orang maka suatu web perlu di
hosting. Berikut ini adalah tutorial cara mengupload web :
1. Buat akun di www.000webhost.com
a. Buka www.000webhost.com
b. Lalu selanjutnya klik Button Sign Up yang berada disebelah kanan untuk
memulai daftar.
c. kalo sudah nanti akan muncul seerti gambar berikut :

apabila berhasil nanti tampilanya seerti ini :
2. Login dengan akun yang telah anda buat sebelumnya
Ketika sudah berhasil login akan terlihat tampilan seperti berikut :

3. Klik Go to Cpanel
4. Untuk memulai Membuat MySQL database ser ta PHP my admin (scroll- lah
sampai halaman seperti gambar berikut menjadi nampak) , anda bisa
menggunakan menu yang telah saya lingkari dengan warna merah berikut :
5. Lalu berikut adalah cara menghost /mengupload file PHP, HTML, JavaScript
, gambar , dll di000webhost .com, perhatikan bagian yang telah saya tandai
dengan warna biru (FileManager), kliklah bagian tersebut :

6. Berikut adalah tampilan file manager
7. Untuk memulai meng-upload file silahkan untuk mengklik public_html
8. Selanjutnya, untuk memulai meng-upload f ile silahkan untuk mengklik
"Upload"
9. Tekan tombol "browse" untuk memulai memilih file yang hendak di-upload
dari komputer anda.

10. Jika sudah, dan ingin memulai meng-upload f ile. . .silakan untuk mengklik
tombol dengan gambar "Centang"
11. Jika sudah, klik gambar back untuk kembali ke halaman public_html
12. Sekarang and sudah bisa menggunakan 000webhost .com sebagai tempat
hosting dengan baik.

III. HASIL PERCOBAAN
Pada bagian ini akan dibahas mengenai sintak-sintak penyusun web mulai dari tag
html hingga koneksi database menggunakan php. Program dibagi menjadi beberapa sub
bagian yaitu index.php, login.php, logout.php, upload.php, delete.php, connect.php,
doc.php. Berikut adalah penjelasan masing-masing sub program.
3.1 Index.php
Index.php merupakan halaman utama dari web yang disusun dalam proyek akhir ini.
Berikut adalah sintak penyusun indeks.php :
<?php session_start();
if(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) ==
'')){
header( "Location: login.php" );
}
?>
Sintak di atas merupakan sebuah session yang digunakan untuk menyimpan username
yang diinputkan melalui form login untuk mengidentifikasi user yang sedang aktif.
Program di atas menunjukkan ketika tidak terdapat user yang login maka program akan
kembali ke halaman login, sehingga dapat dikatakan bahwa halaman indeks hanya bisa di
akses oleh user yang telah memiliki account yang telah tersimpan pada database.
Output program :

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"> <span class="sr-
only">Toggle navigation</span> <span class="icon-bar"></span> <span
class="icon-bar"></span> <span class="icon-bar"></span> </button>
<img src="img/emblem2.png" style="float:left; padding:2px;"><a
class="navbar-brand" href="#">Cloudy Drive</a> </div>
<!-- Collect the nav links, forms, and other content for toggling --
>
Username yangteridentifikasi olehsession

<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav" style="float:right;">
<li class="ses-name"> <?php echo $_SESSION['login_user'];
?></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>

</div>

</nav>
Sintak di atas merupakan navigasi bar yang terdiri dari session sebagai identifikasi user
yang sudah berhasil login dan tombol navigasi logout.
Output program :

<div class="row">
<div class="col-lg-12">
<h2 class="page-header">UPLOAD <small>Your data here !</small> </h2>
<form action="upload.php" method="post" enctype="multipart/form-
data">
<input type="file" name="uploaded_file" id="uploaded_file"><span
class="space"> </span>
<input class="btn btn-primary btn-lg" type="submit" value="Upload"
name="submit">
</form>
</div>
</div>
Program di atas difungsikan untuk proses upload data ke dalam database melalui web.
Output program :


<div class="row">

<h2 class="page-header">Your Cloud <small>Check This Out !</small>
</h2>
</div>
<div class="col-lg-4 col-sm-6 text-center">
<a href="doc.php?view=doc"> <img class="img-circle img-responsive
img-center item pic1" alt=""></a>
<h3>Document</h3>
<p>Write down every information and keep it safe with Cloudy Drive
! </p>
</div>
<a href="doc.php?view=img"> <img class="img-circle img-responsive
img-center item pic2" alt=""> </a>
<h3>Photo </h3>
<p>Placed every moment you have and keep it safe with Cloudy Drive
!</p>
</div>
<a href="doc.php?view=musik"><img class="img-circle img-responsive
<h3>Music</h3>
<p>Record every second your special moment and keep it safe with
Cloudy Drive !</p>
</div>
</div>
<hr>
Program di atas merupakan contain dari indek.php, dimana dalam contain terdapat
pembagian jenis data/file yang di upload.
Output program :
3.2 Login.php
Login.php merupakan halaman yang akan pertama kali ditampilkan ke webbrowser
dimana pada halaman ini user harus memasukkan username dan password agar bisa
mengakses halaman index.php. Berikut adalah sintak penyusunnya :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="pic"> <img src="img/15 Computer functions circle
icons.png"> </div>
<div class="formbox">
<div class="emblem"><img src="img/emblem.png"></div>
<form class="form-signin" action="login.php" method="post">
<input type="email" name="username" class="form-control"
placeholder="Email address" required autofocus>
<input type="password" name="password" class="form-control"
placeholder="Password" required>
<input class="btn btn-lg btn-primary btn-block customsubmit"
type="submit" value="Login">
</form>
</div>
</div>

<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Output program :

<?php
session_start(); // Starting Session
$error=''; // Variable To Store Error Message
if (isset($_POST['username']) && isset($_POST['password'])) {
if (empty($_POST['username']) || empty($_POST['password'])) {
$error = "Username or Password is invalid";
}
else
{
// Define $username and $password
$id_user=$_POST['id'];
$username=$_POST['username'];
$password=$_POST['password'];
echo $username;
// Establishing Connection with Server by passing server_name,
user_id and password as a parameter
$connection = mysql_connect("localhost", "root", "");
// To protect MySQL injection for Security purpose
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);
// Selecting Database
$db = mysql_select_db("cloudydrive", $connection);
// SQL query to fetch information of registerd users and finds user
match.
$query = mysql_query("select * from member where pswd='$password' AND
username='$username'", $connection);
$rows = mysql_num_rows($query);
$res=mysql_fetch_assoc($query);
if ($rows == 1) {
$_SESSION['login_user']=$username; // Initializing Session
$_SESSION['id_user']=$res['id_user'];
header("location: index.php"); // Redirecting To Other Page
} else {
}
mysql_close($connection); // Closing Connection
}
} ?>
Session di atas berfungsi untuk mengolah variable yang diinputkan melalui form login.
Ketika form login mendapatkan sebuah input data berupa username dan password maka
session akan mengidentifikasi apakah username dan password sama dengan data account
yang sudah terdaftar dalam database. Ketika username dan password yang dimasukkan
tidak sama dengan username dan password yang ada dalam database maka akan muncul
notifikasi “username and password invalid !” dan akan redirect ke halaman login.php.
Namun ketika username sudah teridentifikasi dan sama seperti yang terdapat dalam
database maka program akan redirect ke index.php.

3.3 Upload.php
Upload.php merupakan program php yang berfungsi untuk mengirimkan file menuju
database. Program ini mengidentifikasi jenis file yang diupload serta mengklasifikasikan
file berdasarkan jenisnya. Dalam program ini ukuran file juga di batasi hingga 20 MB
sehingga ketika file yang di upload melebihi 20 MB maka file akan gagal terupload.
<?php
include 'connect.php';
if(isset($_FILES['uploaded_file'])){
$errors= array();
$file_name = $_FILES['uploaded_file']['name'];
$file_size =$_FILES['uploaded_file']['size'];
$file_tmp =$_FILES['uploaded_file']['tmp_name'];
$file_type=$_FILES['uploaded_file']['type'];
@$file_ext=strtolower(end(explode('.',$_FILES['uploaded_file']['name']))
);
$extensions =
array("jpeg","jpg","png","docx","doc","pdf","pptx","xlsx","mp4","mp3","w
av");
if(in_array($file_ext,$extensions )=== false){
$errors[]="extension not allowed, please choose correct file.";
}
if($file_size > 20097152){
$errors[]='File size must be excately 20 MB';
}
if(empty($errors)==true){
if($file_ext=="jpeg" || $file_ext=="jpg" || $file_ext=="png"){
move_uploaded_file($file_tmp,"files/images/".$file_name);
}
elseif($file_ext=="doc" ||$file_ext=="docx" || $file_ext=="pdf"
|| $file_ext=="xlsx" || $file_ext=="pptx"){
move_uploaded_file($file_tmp,"files/document/".$file_name);
}
elseif($file_ext=="mp4" || $file_ext=="mp3" ||
$file_ext=="wav"){
move_uploaded_file($file_tmp,"files/musik/".$file_name);
}
$stat=mysql_query("INSERT INTO file (name, type, size) VALUES
('$file_name', '$file_ext', $file_size)");
echo "succes";
}else{
print_r($errors);
}
}
3.4 Delete.php
Program delete.php difungsikan untuk menghapus data yang terdapat dalam database
melalui tampilan web, sehingga file yang sudah tidak dibutuhkan dapat dihapus. Berikut
adalah sintak dari program delete.php :

<?php
if(isset($_REQUEST['id']))
{
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$id = $_REQUEST['id'];
$sql = "DELETE FROM file WHERE id = $id" ;
mysql_select_db('cloudydrive');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not delete data: ' . mysql_error());
}
echo "Deleted data successfullyn";
mysql_close($conn);
}
?>
Proses pendelete-an data di dasarkan pada id dari data yang sudah berhasil di upload. Proses
delete data menggunakan metode request.
3.5 Doc.php
Doc.php merupakan php yang difungsikan untuk menampilkan data yang sudah
berhasil di-upload kedalam database ke dalam tampilan web. Berikut adalah sintak dari
doc.php :
<?php
//Start session
session_start();
//Check whether the session variable SESS_MEMBER_ID is present or not
if(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) ==
'')) {
header("location: index.php");
exit();
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav " style="float:right;">
<li class="ses-name navlog"><?php echo $_SESSION['login_user'];
?></li>
</ul>
<div class="navbar-header"> <img src="img/emblem2.png"
style="float:left; padding:2px;"><a class="navbar-brand" href="#">Cloudy
Drive</a> </div>
</div>
</nav>
<div class="containercontent">
<h3 class="sub-header"><i class="fa fa-files-o fa-2x"></i> Your
Document</h3>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Size</th>
<th>Modified</th>
<th style="text-align:center">Action</th>
</tr>
</thead>
<?php
$filetype=$_REQUEST['view'];
if($filetype=='doc'){
$qry = "SELECT *FROM file WHERE (type='docx' ||
type='doc' || type='pdf' || type='pptx' || type='xlsx') &&
id_user='".$_SESSION['id_user']."'";
$currdir='document';
}else if($filetype=='img'){
$qry = "SELECT *FROM file WHERE type='jpg' ||
type='jpeg' || type='png'";
$currdir='images';
}else if($filetype=='musik'){
$qry = "SELECT *FROM file WHERE type='mp3' ||
type='mp4' || type='wav'";
$currdir='musik';
}
$sql = mysql_query($qry);
while($row = mysql_fetch_array($sql)){
echo "<tr>
<td>".$row['id']."</td>
<td>".$row['name']."</td>
<td>".$row['size']." byte</td>
<td>".$row['created']."</td>
<td style='text-
align:center'> <a href='http://localhost/PIproject/files/".$currdir."/".$row['name']."'><button
class='btn btn-success btn-sm' name='submit'>Download</button></a>
<a
href='delete.php?id=".$row['id']."'><button class='btn btn-danger btn-
sm' name='submit'> Delete</button></a></td>
</tr>";
}
mysql_close();

?>
</table>
</div>
</div>
</body>
</html>
Output Program :
3.6 Connect.php
Connect.php difungsikan untuk mengkoneksikan web ke sebuah database. Berikut
adalah sintaknya :
<?php
$conn=mysql_connect('localhost','root','');
mysql_select_db('cloudydrive') or die('database error');
?>
IV. KESIMPULAN
1. Untuk proses login dan logout pada aplikasi berbasis web dapat dilakukan dengan
menggunakan fasilitas php $_SESSION. Dan proses ini berhasil berjalan pada Aplikasi
Cloudy Drive yang sudah dirancang ini.
2. Untuk menampilkan data dari database membutuhkan query MYSQL yaitu berupa
syntax INSERT. Dan proses ini berhasil berjalan pada Aplikasi Cloudy Drive yang
sudah dirancang ini.
3. Secara keseluruhan aplikasi dapat berjalan dengan baik menggunakan syntax-syntax
yang sudah dijelaskan dan dicantumkan pada file cource code.

V. LAMPIRAN
 INDEX.PHP
<?php session_start();
if(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user'])
== '')){
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>index</title>


<link href="css/round-about.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span
class="sr-only">Toggle navigation</span> <span class="icon-
bar"></span> <span class="icon-bar"></span> <span class="icon-
bar"></span> </button>
<img src="img/emblem2.png" style="float:left; padding:2px;"><a
class="navbar-brand" href="#">Cloudy Drive</a> </div>

<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav" style="float:right;">
<li class="ses-name"> <?php echo $_SESSION['login_user'];
?></li>
</ul>
</div>

</div>
</nav>


<div class="row">
<h2 class="page-header">UPLOAD <small>Your data here !</small>
</h2>
<form action="upload.php" method="post" enctype="multipart/form-
data">

<input type="file" name="uploaded_file" id="uploaded_file"><span
class="space"> </span>
<input class="btn btn-primary btn-lg" type="submit"
value="Upload" name="submit">
</form>
</div>
</div>

<div class="row">
<h2 class="page-header">Your Cloud <small>Check This Out
!</small> </h2>
</div>
<a href="doc.php?view=doc"> <img class="img-circle img-responsive
<h3>Document</h3>
<p>Write down every information and keep it safe with Cloudy
Drive ! </p>
</div>
<a href="doc.php?view=img"> <img class="img-circle img-responsive
img-center item pic2" alt=""> </a>
<h3>Photo </h3>
<p>Placed every moment you have and keep it safe with Cloudy
Drive !</p>
</div>
<a href="doc.php?view=musik"><img class="img-circle img-responsive
<h3>Music</h3>
<p>Record every second your special moment and keep it safe with
Cloudy Drive !</p>
</div>
</div>
<hr>

<footer>
<div class="row">
<p>Copyright © mafailmi 2014</p>
</div>

</div>

</footer>
</div>

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

 LOGIN.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>

<link href="css/login.css" rel="stylesheet">
</head>
<body>
<div class="pic"> <img src="img/15 Computer functions circle
icons.png"> </div>
<div class="formbox">
<div class="emblem"><img src="img/emblem.png"></div>
<form class="form-signin" action="login.php" method="post">
<input type="email" name="username" class="form-control"
placeholder="Email address" required autofocus>
<input type="password" name="password" class="form-control"
placeholder="Password" required>
<input class="btn btn-lg btn-primary btn-block customsubmit"
type="submit" value="Login">
</form>
</div>
</div>

<script src="../../assets/js/ie10-viewport-bug-
workaround.js"></script>
</body>
</html>
<?php
session_start(); // Starting Session
$error=''; // Variable To Store Error Message
if (isset($_POST['username']) && isset($_POST['password'])) {
if (empty($_POST['username']) || empty($_POST['password'])) {
}
else
{
// Define $username and $password
$id_user=$_POST['id'];
$username=$_POST['username'];
$password=$_POST['password'];
echo $username;
// Establishing Connection with Server by passing server_name,
user_id and password as a parameter
$connection = mysql_connect("localhost", "root", "");
// To protect MySQL injection for Security purpose
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);
// Selecting Database
$db = mysql_select_db("cloudydrive", $connection);
// SQL query to fetch information of registerd users and finds user
match.

$query = mysql_query("select * from member where pswd='$password' AND
username='$username'", $connection);
$rows = mysql_num_rows($query);
$res=mysql_fetch_assoc($query);
if ($rows == 1) {
$_SESSION['login_user']=$username; // Initializing Session
$_SESSION['id_user']=$res['id_user'];
header("location: index.php"); // Redirecting To Other Page
} else {
}
mysql_close($connection); // Closing Connection
}
}
?>
 UPLOAD.PHP
<?php
if(isset($_FILES['uploaded_file'])){
$errors= array();
$file_name = $_FILES['uploaded_file']['name'];
$file_size =$_FILES['uploaded_file']['size'];
$file_tmp =$_FILES['uploaded_file']['tmp_name'];
$file_type=$_FILES['uploaded_file']['type'];
@$file_ext=strtolower(end(explode('.',$_FILES['uploaded_file']['name']
)));
$extensions =
array("jpeg","jpg","png","docx","doc","pdf","pptx","xlsx","mp4","mp3",
"wav");
if(in_array($file_ext,$extensions )=== false){
$errors[]="extension not allowed, please choose correct file.";
}
if($file_size > 20097152){
$errors[]='File size must be excately 20 MB';
}
if(empty($errors)==true){
if($file_ext=="jpeg" || $file_ext=="jpg" || $file_ext=="png"){
move_uploaded_file($file_tmp,"files/images/".$file_name);
}
elseif($file_ext=="doc" ||$file_ext=="docx" || $file_ext=="pdf"
|| $file_ext=="xlsx" || $file_ext=="pptx"){
move_uploaded_file($file_tmp,"files/document/".$file_name);
}
elseif($file_ext=="mp4" || $file_ext=="mp3" ||
$file_ext=="wav"){
move_uploaded_file($file_tmp,"files/musik/".$file_name);
}
$stat=mysql_query("INSERT INTO file (name, type, size) VALUES
('$file_name', '$file_ext', $file_size)");
echo "succes";
}else{
print_r($errors);
}
}

 DOC.PHP
<?php
//Start session
session_start();
//Check whether the session variable SESS_MEMBER_ID is present or not
if(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user'])
== '')) {
header("location: index.php");
exit();
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav " style="float:right;">
<li class="ses-name navlog"><?php echo $_SESSION['login_user'];
?></li>
</ul>
<div class="navbar-header"> <img src="img/emblem2.png"
style="float:left; padding:2px;"><a class="navbar-brand"
href="#">Cloudy Drive</a> </div>
</div>
</nav>
<div class="containercontent">
<h3 class="sub-header"><i class="fa fa-files-o fa-2x"></i> Your
Document</h3>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Size</th>
<th>Modified</th>
<th style="text-align:center">Action</th>
</tr>
</thead>
<?php
$filetype=$_REQUEST['view'];
if($filetype=='doc'){
$qry = "SELECT *FROM file WHERE (type='docx'
|| type='doc' || type='pdf' || type='pptx' || type='xlsx') &&
id_user='".$_SESSION['id_user']."'";
$currdir='document';
}else if($filetype=='img'){

$qry = "SELECT *FROM file WHERE type='jpg' ||
type='jpeg' || type='png'";
$currdir='images';
}else if($filetype=='musik'){
$qry = "SELECT *FROM file WHERE type='mp3' ||
type='mp4' || type='wav'";
$currdir='musik';
}
$sql = mysql_query($qry);
while($row = mysql_fetch_array($sql)){
echo "<tr>
<td>".$row['id']."</td>
<td>".$row['name']."</td>
<td>".$row['size']." byte</td>
<td>".$row['created']."</td>
<td style='text-
align:center'> <a href='http://localhost/PIproject/files/".$currdir."/".$row['name']."'><button
class='btn btn-success btn-sm' name='submit'>Download</button></a>
<a
href='delete.php?id=".$row['id']."'><button class='btn btn-danger btn-
sm' name='submit'> Delete</button></a></td>
</tr>";
}
mysql_close();
?>
</table>
</div>
</div>
</body>
</html>
 DOC.PHP
<?php
if(isset($_REQUEST['id']))
{
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$id = $_REQUEST['id'];
$sql = "DELETE FROM file WHERE id = $id" ;
mysql_select_db('cloudydrive');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not delete data: ' . mysql_error());
}
echo "Deleted data successfullyn";
mysql_close($conn);
}
?>

 CONNECT.PHP
<?php
$conn=mysql_connect('localhost','root','');
mysql_select_db('cloudydrive') or die('database error');?>
 LOGOUT.PHP
<?php
session_start();
if(isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) !=
'')){
session_unset();
session_destroy();
}
else{
header( "Location: index.php" );
}
?>
 DATABASE
 TABLE FILE
 TABLE MEMBER

http://infotek.comuf.com/PIProject/login.php
http://infotek.comuf.com/PIProject/index.php
http://infotek.comuf.com/PIProject/doc.php?view=doc

CLOUDY DRIVE-APLIKASI

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CLOUDY DRIVE-APLIKASI

Similar to CLOUDY DRIVE-APLIKASI (20)

More from mafailmi

More from mafailmi (6)

Recently uploaded

Recently uploaded (20)

CLOUDY DRIVE-APLIKASI