[Pemprograman Berbasis KK] Tugas 1

Nitama Nurlingga Yotifa
05111740000059

Aplikasi Desktop Menggunakan Electron

Hasil Akhir

Source Code

1. mainWindow.html

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <title>Biodata</title>  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <h1>My Biodata</h1>  
   <div class="container cf">  
     <div class="main">  
       <table>  
         <thead>  
         </thead>  
         <tbody>  
           <tr>  
             <td>Nama</td>  
             <td>Nitama Nurlingga Yotifa</td>  
           </tr>  
           <tr>  
             <td>Alamat</td>  
             <td>Perumahan Bumi Madina Asri, Mulyorejo, Surabaya</td>  
           </tr>  
           <tr>  
             <td>Asal Sekolah</td>  
             <td>SMA Negeri 1 Purworejo</td>  
           </tr>  
           <tr>  
             <td>Email</td>  
             <td>nurlingganitama@gmail.com</td>  
           </tr>  
           <tr>  
             <td>blog</td>  
             <td>nitamanurlingga.blogspot.com</td>  
           </tr>  
           <tr>  
             <td>No HP</td>  
             <td>085735662849</td>  
           </tr>  
         </tbody>  
       </table>  
     </div>  
     <div class="sidebar">  
       <img src="img/foto.jpg" alt="Nitama Nurlingga Yotifa">  
     </div>  
   </div>  
 </body>  
 </html>

2. style.css

 body{  
   background-image: url(img/background.png);  
   background-repeat: repeat;  
 }  
 h1{  
   text-align: center;  
   /* font-family: 'Pacifico', cursive; */  
   color: rgb(127, 199, 175);  
   font-size: 50px;  
   font-weight: bold;  
 }  
 tr{  
   height: 30px;  
 }  
 td{  
   padding: 10px;  
   font-family: 'PT Sans', sans-serif;  
   font-size: 18px;  
   color: white;  
 }  
 .container{  
   padding: 30px;  
   width: 900px;  
   background-color: rgb(127, 199, 175);  
   border: 5px solid white;  
   margin: auto;  
   position: relative;  
   box-sizing: border-box;  
 }  
 img{  
   width: 250px;  
   border-radius: 10px;  
 }  
 .main {  
   float: left;  
 }  
 .sidebar{  
   float: right;  
 }  
 /* micro clearfix */  
 .cf:before,  
 .cf:after {  
   content: " "; /* 1 */  
   display: table; /* 2 */  
 }  
 .cf:after {  
   clear: both;  
 }  
 .cf {  
   *zoom: 1;  
 }

3. main.js

 const electron = require('electron');  
 const url = require('url');  
 const path = require('path');  
 const {app, BrowserWindow} = electron;  
 let mainwindow;  
 // listen for app to be ready  
 app.on('ready', function(){  
   // create new window  
   mainwindow = new BrowserWindow({});  
   // load html into window  
   mainwindow.loadURL(url.format({  
     pathname: path.join(__dirname, 'mainWindow.html'),  
     protocol: 'file:',  
     slashes: true  
   }));  
 });

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas #PBOA-tugas 3 (Remote AC)

Gambar
Class and Object Remote AC berikut ini adalah program untuk membuat simulasi remote AC. Remote AC ini memiliki fitur mengubah suhu, fan, dan mode. Sedangkan disini saya menggunakan dua class, yaitu remoteAC dan Main. remoteAC /** * Write a description of class ticketMachine here. * * @author (Nitama Nurlingga Yotifa) * @version (20180922) */ public class remoteAC { private int suhu; private int mode; private int fan; /** * Constructor for objects of class ticketMachine */ public remoteAC(int suhuAC, int fanAC, int modeAC) { suhu = suhuAC; mode = modeAC; fan = fanAC; } //menampilkan suhu sekarang public int getTemperature() { return suhu; } //menampilkan mode sekarang public int getMode() { return mode; } //menampilkan fan sekarang public int getFan() { return fan; } //menaikkan suhu AC public
Baca selengkapnya

Tugas #PBOA-tugas 6 (Auction)

Gambar
AUCTION Untuk membuat sistem lelang (Auction) menggunakan empat class, yaitu : Person Bid Lot Auction Berikut adalah souce code yang digunakan : Person /** * Maintain details of someone who participates in an auction. * @author Nitama Nurlingga Yotifa. * @version 20181007 */ public class Person { // The name of this person. private final String name; /** * Create a new person with the given name. * @param name The person's name. */ public Person(String name) { this.name = name; } /** * @return The person's name. */ public String getName() { return name; } } Bid /** * A class that models an auction bid. * It contains a reference to the Person bidding and the amount bid. * * @author Nitama Nurlingga Yotifa. * @version 20181007 */ public class Bid { // The person making the bid. private final Per
Baca selengkapnya

[Pemprograman Berbasis KK] ETS

Gambar
Nitama Nurlingga Yotifa 05111740000059 Evaluasi Tengah Semester Sistem Informasi Pencatatan Transaksi Penjualan pada Kasir (POS) Deskripsi Sistem Sistem ini merupakan sebuah sistem informasi yang diperuntukkan untuk melakukan pencatatan transaksi pada kasir suatu cafe yang menjual minuman kopi. Fitur Fitur yang terdapat pada sistem ini yaitu : Login admin dan karyawan Sebelum memasuki halaman home, user akan diarahkan pada halaman login. Login karyawan dan admin pada halaman yang sama. Halaman login untuk karyawan dan admin Masukkan email (nitama@gmail.com) dan password (1234) untuk login akun karyawan Masukkan email (yotifa@gmail.com) dan password (1234) untuk login akun admin Halaman home Halaman home merupakan halaman utama/dashboard. Ketika user berhasil login secara otomatis akan diarahkan ke halaman ini. Halaman home untuk karyawan. Halaman home untuk admin. Perbedaan dengan halaman milik karyawan terapat pada menu sidebar Registrasi akun ka
Baca selengkapnya