Aplikasi Pengolah Data Penjualan Dengan HTML Php MySql dan Pembahasan, Coding

A.Latar Belakang

LenSa Boutique adalah suatu usaha yang bergerak di bidang penjualan gaun pernikahan muslim. Berbagai corak / motif gaun pernikahan muslim dari berbagai pengrajin di seluruh nusantara dapat ditemukan disini.

Dalam era perkembangan teknologi komputer saat ini masih banyak pengusaha yang belum memanfaatkan kemajuan teknologi komputer dengan baik. Kebanyakan dari mereka masih mencatat transaksi secara sistem manual. Dalam sistem manual pengusaha mencatat setiap transaksi yang terjadi sehingga hal ini bisa menimbulkan permasalahan yang terjadi pada saat proses pencatatannya. Kurang optimalnya waktu pembuatan laporan dan masih banyaknya kesalahan yang terjadi dalam sebuah laporan penjualan membuat para pengusaha kesulitan dalam mengontrol perputaran modal mereka. sebap itu saya membuat progam yang memudahkan dalam proses pembuatan laporan penjualan di LenSa Boutique dengan menggunakan aplikasi PHP.

B.Tujuan Pembuatan Program

Tujuan dibuatnya program ini adalah untuk mempermudah petugas dalam melakukan perhitungan penjualan serta laporan data di LenSa Boutique.

C.Kegunaan/Manfaat

Dengan dibuatnya program ini diharapkan dapat memberikan manfaat. Adapun manfaat tersebut adalah:

1.Manfaat Bagi LenSa Boutique

Membantu mempermudah pembuatan laporan penjualan pada bagian penjualan.

2.Manfaat Bagi Mahasiswa

Dapat menerapkan ilmu pengetahuan khususnya tentang komputer yang diperoleh selama berada dibangku kuliah, selain itu mahasiswa dapat membuat sebuah sistem yang berguna bagi sebuah perusahaan.

PEMBAHASAN

A. Cara Pembuatan Program

Program aplikasi penjualan LenSa Boutique ini merupakan aplikasi yang digunakan untuk mengelola data penjualan yang ada pada LenSa Boutique.

Adapun langkah-langkah dalam pembuatan program aplikasi ini adalah sebagai berikut :

1. Menyalakan komputer

2. Mengaktifkan Xampp, lalu klik start pada Apache dan Mysql. Seperti gambar dibawah ini :

Gambar 1.1 Tampilan Xampp

3. Selanjutnya buka browser, lalu ketikkan pada server : Localhost/phpmyadmin. Maka akan muncul seperti gambar di bawah ini :

Gambar 1.2 Tampilan phpmyadmin

4. Kemudian membuat database baru dengan nama db_penjualan dan dilanjutkan membuat tabel dengan nama penjualan.

Nama Field Type

no_nota int(10)

nama_pembeli varchar(50)

nama_barang varchar(25)

Jumlah int(10)

harga_satuan int(12)

total_harga int(12)

user_name varchar(25)

tgl_proses datetime

5. Membuka aplikasi Notepad++, kemudian menuliskan coding yang diperlukan.

Nama File Keterangan

koneksi.php Untuk mengoneksikan ke database.

home.php Untuk membuat tampilan awal yang berisi tentang sambutan awal.

profil.php Untuk membuat tampilan profil anggota yang berisi tentang sekilas info LenSa

Boutique, profil Leni, profil Santi.

input_penjualan.php Untuk membuat form input penjualan.

barang_tambahQ.php Untuk mengoneksikan data yang telah di input agar masuk ke database.

barang_tampil.php Untuk menampilkan data yang telah di input.

barang_ubah.php Untuk menampilkan data yang ingin di ubah.

barang_ubahQ.php Untuk mengupdate data yang telah diubah agar masuk ke database.

barang_hapus.php Untuk menghapus data yang ingin dihapus.

1. Tampilan program aplikasi penjualan LenSa Boutique.

Terdapat 5 menu yaitu : Home, Profil, Input, Tampil, dan Album. Kelima menu ini akan selalu tampil, selain ada menu juga terdapat Logo LenSa Boutique. Dan dibawah logo dan menu terdapat slide gambar gaun pernikahan yang akan berganti gambar setelah 5 detik. Di kelima menu yang ada, slide gambar ini akan selalu muncul.

Gambar 1.3 Tampilan Awal

2. Tampilan menu Home.

Pada menu ini akan ditampilkan kata sambutan awal.

Gambar 1.4 Tampilan menu Home

3. Tampilan menu Profil.

Pada menu ini menampilkan tentang LenSa Boutique, profil Leni, dan Profil Santi.

Gambar 1.5 Tampilan menu Profil

4. Tampilan menu Input.

Pada menu ini berisi form untuk menginput data penjualan.

Gambar 1.6 Tampilan menu Input

5. Tampilan menu Tampil.

Pada menu ini untuk menampilkan data penjualan yang telah berhasil diinput.

Gambar 1.7 Tampilan menu Tampil

Jika ingin menambah data penjualan, bisa dilakukan dengan meng-klik tombol TAMBAH yang berada di atas tabel. Selain itu dapat juga mengubah data dengan cara meng-klik tombol UBAH yang berada di kolom terakhir pada tabel. Begitu pula untuk menghapus data dapat dilakukan dengan meng-klik tombol DELETE pada kolom terakhir tabel.

Adapun tampilan saat ingin mengubah data adalah sebagai berikut :

Gambar 1.8 Tampilan Ubah

6. Tampilan menu Album.

Pada menu ini akan ditampilkan beberapa contoh gambar gaun pengantin beserta harga.

Gambar 1.9 Tampilan menu Album

KESIMPULAN DAN SARAN

A. Kesimpulan

Berdasarkan uraian serta implementasi dan pengujian yang telah dilakukan, maka dapat di ambil kesimpulan terhadap Aplikasi Penjualan di LenSa Boutique adalah sebagai berikut :

1.Aplikasi Penjualan memudahkan pengguna dalam mengelola data penjualan. Karena aplikasi ini disesuaikan dengan kebutuhan pengguna pada saat mengelola data.

2.Aplikasi Penjualan ini dapat mengurangi tingkat kesalahan pengguna data karena dalam pengelolahan data telah ter-komputerisasi.

B.Saran

Beberapa saran yang dapat di sampaikan adalah sebagai berikut :

1.Pembuatan aplikasi ini masih bisa dikembangkan lebih lanjut disesuaikan dengan berkembangnya spesifikasi kebutuhan pengguna, terutama pada tampilan bisa dibuat lebih menarik.

2.Harus dibuatnya file backup data. Hal ini diperlukan untuk antisipasi jika terjadi kerusakan dan kehilangan data, atau sesuatu yang tidak diinginkan terjadi pada data, sehingga file backup tadi bisa digunakan lagi.

3.Objek penelitian lebih luas yaitu tidak hanya mengacu pada informasi penjualan produk saja melainkan seluruh organisasi sosial yang ada.

Coding

• Coding koneksi.php

<?php

mysql_connect("localhost","root","")or die ("Koneksi Database Gagal !");

mysql_select_db(db_penjualan)or die ("Buka Database Gagal ! ");

• Coding home.php

<!DOCTYPE html>

<head>

<title>LenSa</title>

</head>

<nav>

<li><a href="profil.php">Profil</a></li>

<li><a href="input_penjualan.php">Input</a></li>

<li><a href="barang_tampil.php">Tampil</a></li>

<li><a href="album.php">Album</a></li>

</ul>

</nav>

</div>

</div>

</header>

</div>

<h2>Aplikasi Penjualan <span>LenSa Boutique </span></h2>

<p>Selamat Datang di Aplikasi Penjualan LenSa Boutique </p>

<p>Aplikasi ini merupakan suatu aplikasi yang digunakan untuk mengelola penjualan gaun pengantin</p>

</div>

</article>

</div>

Design by <a target="_blank" href="http://www.templatemonster.com/">LenSaBoutique.com</a></footer>

</div>

$(window).load(function () {

$('.slider').nivoSlider({

effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'

slices: 17,

animSpeed: 500,

pauseTime: 8000,

startSlide: 0, //Set starting Slide (0 index)

directionNav: true, //Next & Prev

directionNavHide: false, //Only show on hover

controlNav: true, //1,2,3...

controlNavThumbs: false, //Use thumbnails for Control Nav

controlNavThumbsFromRel: false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav: true, //Use left & right arrows

pauseOnHover: true, //Stop animation while hovering

manualAdvance: false, //Force manual transitions

captionOpacity: 1, //Universal caption opacity

beforeChange: function () {},

afterChange: function () {

Cufon.refresh();

slideshowEnd: function () {} //Triggers after all slides have been shown

});

</script>

</body>

</html>

• Coding profil.php

<!DOCTYPE html>

<head>

<title>LenSa</title>

</head>

<nav>

<li><a href="profil.php">Profil</a></li>

<li><a href="input_penjualan.php">Input</a></li>

<li><a href="barang_tampil.php">Tampil</a></li>

<li><a href="album.php">Album</a></li>

</ul>

</nav>

</div>

</div>

</header>

</div>

<h2>About <span>LenSa Boutique</span></h2>

<p>LenSa Boutique adalah suatu usaha yang bergerak di bidang penjualan gaun pernikahan muslim. Berbagai corak / motif gaun pernikahan muslim dari berbagai pengrajin di seluruh nusantara dapat ditemukan disini. </p>

</div>

<h2>Profil <span>Leni</span></h2>

<p>Nama : Leni Wiji Lestari</p>

<p>Progdi : Komputerisasi Akuntansi - D3</p>

<p>Alamat : Babadan, RT 01 / RW 01, Babadan, Karangdowo, Klaten</p>

<p>Hobby : Membaca</p>

<p>Motto Hidup : Dimanapun semangat bermanfaat, Tanamkan konsep datang untuk memberi </p>

</div>

</section>

<h2>Profil <span>Santi</span></h2>

<p>Nama : Santi Purwanti</p>

<p>Progdi : Komputerisasi Akuntansi - D3</p>

<p>Alamat : Sidomulyo, Ngandul, Sumberlawang, Sragen</p>

<p>Hobby : Travelling</p>

</div>

</section>

</div>

</article>

</div>

Design by <a target="_blank" href="http://www.templatemonster.com/">LenSaBoutique.com</a></footer>

</div>

$(window).load(function () {

$('.slider').nivoSlider({

effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'

slices: 17,

animSpeed: 500,

pauseTime: 8000,

startSlide: 0, //Set starting Slide (0 index)

directionNav: true, //Next & Prev

directionNavHide: false, //Only show on hover

controlNav: true, //1,2,3...

controlNavThumbs: false, //Use thumbnails for Control Nav

controlNavThumbsFromRel: false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav: true, //Use left & right arrows

pauseOnHover: true, //Stop animation while hovering

manualAdvance: false, //Force manual transitions

captionOpacity: 1, //Universal caption opacity

beforeChange: function () {},

afterChange: function () {

Cufon.refresh();

slideshowEnd: function () {} //Triggers after all slides have been shown

});

</script>

</body>

</html>

• Coding input_penjualan.php

<!DOCTYPE html>

<head>

<title>LenSa</title>

</head>

<nav>

<li><a href="profil.php">Profil</a></li>

<li><a href="input_penjualan.php">Input</a></li>

<li><a href="barang_tampil.php">Tampil</a></li>

<li><a href="album.php">Album</a></li>

</ul>

</nav>

</div>

</div>

</header>

</div>

<h2>INPUT PENJUALAN <span>LENSA BOUTIQUE</span></h2>

<tr>

</tr>

<tr>

<td>NAMA PEMBELI :</td>

<td>

bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });

</script>

</td></tr>

<tr>

<?php

include'koneksi.php';

$kode=mysql_query("select * from kebaya order by kode asc");

while($row=mysql_fetch_array($kode)){

<?php

}

</select>

</td>

</tr>

<tr>

<td>NAMA KEBAYA :</td>

</tr>

<tr>

<td>JUMLAH :</td>

</tr>

<tr>

<td>HARGA SATUAN :</td>

</tr>

<tr>

<td>TOTAL HARGA :</td>

</tr>

<tr>

</tr>

</div>

$(window).load(function () {

$('.slider').nivoSlider({

effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'

slices: 17,

animSpeed: 500,

pauseTime: 8000,

startSlide: 0, //Set starting Slide (0 index)

directionNav: true, //Next & Prev

directionNavHide: false, //Only show on hover

controlNav: true, //1,2,3...

controlNavThumbs: false, //Use thumbnails for Control Nav

controlNavThumbsFromRel: false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav: true, //Use left & right arrows

pauseOnHover: true, //Stop animation while hovering

manualAdvance: false, //Force manual transitions

captionOpacity: 1, //Universal caption opacity

beforeChange: function () {},

afterChange: function () {

Cufon.refresh();

slideshowEnd: function () {} //Triggers after all slides have been shown

});

</script>

</body>

</html>

• Coding barang_tambahQ.php

<?php

include ("koneksi.php");

$query = "insert into penjualan (no_nota, nama_pembeli, nama_barang, jumlah, harga_satuan, total_harga, user_name, tgl_proses)

values (NULL, '$_POST[nama_pembeli]', '$_POST[nama_barang]', '$_POST[jumlah]', '$_POST[harga_satuan]', '$_POST[total_harga]', 'ADMIN', now() )";

$result=mysql_query($query) ;

if (result) {

header ("location:barang_tampil.php");

}

else {

echo"proses simpan gagal !";

}

• Coding barang_tampil.php

<!DOCTYPE html>

<head>

<title>LenSa</title>

</head>

<nav>

<li><a href="profil.php">Profil</a></li>

<li><a href="input_penjualan.php">Input</a></li>

<li><a href="barang_tampil.php">Tampil</a></li>

<li><a href="album.php">Album</a></li>

</ul>

</nav>

</div>

</div>

</header>

</div>

<?php

include ("koneksi.php");

$query = "select * from penjualan";

$result=mysql_query($query);

$total =mysql_num_rows($result);

<html>

<head>

<h2>DATA PENJUALAN LENSA BOUTIQUE</h2>

<p><a href="input_penjualan.php">TAMBAH</a></p>

<table border="10" cellspacing="10" cellpadding="10" table width='900' bgcolor='red'

<tr>

<td >NAMA PEMBELI</td>

<td >NAMA BARANG</td>

<td >JUMLAH</td>

<td >HARGA SATUAN</td>

<td >TOTAL HARGA</td>

<td >TGL PROSES</td>

<td >PROSES</td>

</tr>

<?php while ($data=mysql_fetch_array($result)) {?>

<tr>

<td><a href="barang_ubah.php?id=<?php echo $data['no_nota'];?>">UBAH</a> | <a href="barang_hapus.php?id=<?php echo $data['no_nota'];?>">DELETE</a></td>

</tr>

<?php } ?>

</table>

</div>

</article>

</div>

Design by <a target="_blank" href="http://www.templatemonster.com/">LenSaBoutique.com</a></footer>

</div>

$(window).load(function () {

$('.slider').nivoSlider({

effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'

slices: 17,

animSpeed: 500,

pauseTime: 8000,

startSlide: 0, //Set starting Slide (0 index)

directionNav: true, //Next & Prev

directionNavHide: false, //Only show on hover

controlNav: true, //1,2,3...

controlNavThumbs: false, //Use thumbnails for Control Nav

controlNavThumbsFromRel: false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav: true, //Use left & right arrows

pauseOnHover: true, //Stop animation while hovering

manualAdvance: false, //Force manual transitions

captionOpacity: 1, //Universal caption opacity

beforeChange: function () {},

afterChange: function () {

Cufon.refresh();

slideshowEnd: function () {} //Triggers after all slides have been shown

});

</script>

</body>

</html>

• Coding barang_ubah.php

<!DOCTYPE html>

<head>

<title>LenSa</title>

</head>

<nav>

<li><a href="profil.php">Profil</a></li>

<li><a href="input_penjualan.php">Input</a></li>

<li><a href="barang_tampil.php">Tampil</a></li>

<li><a href="album.php">Album</a></li>

</ul>

</nav>

</div>

</div>

</header>

</div>

<?php

include ("koneksi.php");

$query = "select * from penjualan where no_nota = '$_GET[id]'";

$result=mysql_query($query) ;

$data=mysql_fetch_array($result);

<html>

<head>

<title>Ubah Penjualan</title>

</head>

<body>

<h2>UBAH PENJUALAN</h2>

<tr>

</tr>

<tr>

<td>NAMA PEMBELI :</td>

<tr>

<td>NAMA BARANG :</td>

</tr>

<tr>

<td> JUMLAH:</td>

</tr>

<tr>

<td>HARGA SATUAN :</td>

</tr>

<tr>

<td>TOTAL HARGA :</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</article>

</div>

Design by <a target="_blank" href="http://www.templatemonster.com/">LenSaBoutique.com</a></footer>

</div>

$(window).load(function () {

$('.slider').nivoSlider({

effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'

slices: 17,

animSpeed: 500,

pauseTime: 8000,

startSlide: 0, //Set starting Slide (0 index)

directionNav: true, //Next & Prev

directionNavHide: false, //Only show on hover

controlNav: true, //1,2,3...

controlNavThumbs: false, //Use thumbnails for Control Nav

controlNavThumbsFromRel: false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav: true, //Use left & right arrows

pauseOnHover: true, //Stop animation while hovering

manualAdvance: false, //Force manual transitions

captionOpacity: 1, //Universal caption opacity

beforeChange: function () {},

afterChange: function () {

Cufon.refresh();

slideshowEnd: function () {} //Triggers after all slides have been shown

});

</script>

</body>

</html>

</body>

</html>

• Coding barang_ubahQ.php

<?php

include ("koneksi.php");

$query = "update penjualan set nama_pembeli = '$_POST[nama_pembeli]', nama_barang = '$_POST[nama_barang]', jumlah = '$_POST[jumlah]', harga_satuan = '$_POST[harga_satuan]', total_harga = '$_POST[total_harga]' where no_nota = '$_POST[no_nota]'";

$result=mysql_query($query) ;

if (result) {

header ("location:barang_tampil.php");

}

else {

echo"proses simpan gagal !";

}

• Coding barang_hapus.php

<?php

include ("koneksi.php");

$query = "delete from penjualan where no_nota = '$_GET[id]'";

$result=mysql_query($query) ;

if (result) {

header ("location:barang_tampil.php");

}

else {

echo"proses hapus gagal !";

}

• Coding album.php

<!DOCTYPE html>

<head>

<title>LenSa Boutique | Album</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<nav>

<li><a href="profil.php">Profil</a></li>

<li><a href="input_penjualan.php">Input</a></li>

<li><a href="barang_tampil.php">Tampil</a></li>

<li><a href="album.php">Album</a></li>

</ul>

</nav>

</div>

</div>

</header>

</div>

<h2>Photo <span>Albums</span></h2>

<li> <a href="#album1"> <img src="images/album1.jpg" alt=""> Paket 1 > Rp. 5.000.000,- </a> </li>

<li class="pad_left2"> <a href="#album2"> <img src="images/album2.jpg" alt=""> Paket 2 > Rp. 4.500.000,- </a> </li>

<li class="pad_left2"> <a href="#album3"> <img src="images/album3.jpg" alt=""> Paket 3 > Rp. 4.000.000,- </a> </li>

<li> <a href="#album4"> <img src="images/album4.png" alt=""> Paket 4 > Rp. 3.500.000,- </a> </li>

<li class="pad_left2 selected"> <a href="#album5"> <img src="images/album5.png" alt=""> Paket 5 >> Rp. 4.250.000,- </a> </li>

<li class="pad_left2"> <a href="#album6"> <img src="images/album6.jpg" alt=""> Paket 6 >> Rp. 3.700.000,- </a> </li>

<li> <a href="#album7"> <img src="images/album7.png" alt=""> Paket 7 > Rp. 5.000.000,- </a> </li>

<li class="pad_left3"> <a href="#album8"> <img src="images/album8.png" alt=""> Paket 8 > Rp. 4.500.000,- </a> </li>

<li class="pad_left3"> <a href="#album9"> <img src="images/album9.png" alt=""> Paket 9 > Rp. 4.000.000,- </a> </li>

<li> <a href="#album10"> <img src="images/album10.png" alt=""> Paket 10 > Rp. 5.000.000,- </a> </li>

<li class="pad_left4"> <a href="#album11"> <img src="images/album11.png" alt=""> Paket 11 > Rp. 4.500.000,- </a> </li>

<li class="pad_left4"> <a href="#album12"> <img src="images/album12.jpg" alt=""> Paket 12 > Rp. 4.000.000,- </a> </li>

</ul>

</div>

</article>

</div>

Design by <a target="_blank" href="http://www.templatemonster.com/">LenSaBoutique.com</a></footer>

</div>

$(window).load(function () {

$('.slider').nivoSlider({

effect: 'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'

slices: 17,

animSpeed: 500,

pauseTime: 999999999,

startSlide: 0, //Set starting Slide (0 index)

directionNav: true, //Next & Prev

directionNavHide: false, //Only show on hover

controlNav: true, //1,2,3...

controlNavThumbs: false, //Use thumbnails for Control Nav

controlNavThumbsFromRel: false, //Use image rel for thumbs

controlNavThumbsSearch: '.jpg', //Replace this with...

controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src

keyboardNav: true, //Use left & right arrows

pauseOnHover: true, //Stop animation while hovering

manualAdvance: false, //Force manual transitions

captionOpacity: 1, //Universal caption opacity

beforeChange: function () {},

afterChange: function () {

Cufon.refresh();

slideshowEnd: function () {} //Triggers after all slides have been shown

});

$(document).ready(function () {

tabs.init();

});

</script>

</body>

</html>

Aplikasi Pengolah Data Penjualan Dengan HTML Php MySql dan Pembahasan, Coding

1 Response to "Aplikasi Pengolah Data Penjualan Dengan HTML Php MySql dan Pembahasan, Coding"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel