Pengenalan Pemrograman Web
Uploaded by
rakhaaditPengenalan Pemrograman Web
Uploaded by
rakhaaditPertemuan 1 :
Pengenalan
Pemrograman Web
Tim Dosen
Outline
• Web Technologies
• Learning and Training
• Jobs
Web Technologies
• Tipe Web Developers
• HTML
• CSS
• Javascript
• Servers
• Server Side Scripting
• Database Language
Tipe Web Developers (Stack)
• Front End Web Developers
• HTML
• CSS
• Javascript
• Back-end Development
• PHP
• JSP
HTML (Role)
• Describe content and defines the structure within
webpage.
• Hypertext documents on the web are not meant to
be consumed in a liner fashion, they’re designed to
be linked to other documents.
• Information Architecture : involves best structure
site, how user is going to navigate and what type of
access users need to other content
HTML (Critical Role)
• Markup Language : set of tagsthat are added to the
text of eb page to define its structure
CSS (Role)
• Design plays an important part and is akey
component of every successful website.
• Some people interested into finding the look and
feel of a site, and enjoy working on the User
Experience/UX.
• Some people prefer to work on the functinoality of
a site called User Interface/UI.
• All developers need to learn how CSS influences a
document.
CSS
• Set of rules, or style sheets, for how the DOM is
translated into visual form
• Cascading style rules priority of how the styles are
rendered on a page
CSS Example
• CSS Zen Garden
• Same HTML code
• But we can choose/change to a different theme/style.
CSS
CSS
• Desktop, Mobile, Tablet
Javascript (Role)
• Language responsible for managing interaction
within browser.
• Backend Developers using javascripts 50%
• Handling events, loading and unloading media, and
creating modifying and deleting elements in a page
• Browser support issues
• Tools : NodeJS, WebPack, GulpJS
Backend
• Massive amounts of information makes it
impractical to custom-build every single page using
only HTML, CSS, and Javascript.
• Using DB to manage the flow of information sent to
the user
• PHP+MySQL
• The Most popular
• Explore within NodeJS, Ruby on Rails
• Rapidly Changes Updates !!!!
Web Application Architecture
Server
• Linux
• More Common
• Less Expensive
• Fully open source
• Windows
• Popular with large company
• Great dev environments
• Some open projects
Server on Local Machine
• XAMPP
• Web Server Apache
• PHP
• MYSQL
Server side Scripting
• PHP
• NodeJS
• .NET
• ASP.NET
• Ruby
• Python
• Some of these language married to a specific OS
(ASP.NET Windows OS)
Database Language
DB Language
• How to access your data
• SQL and other SQL inheritance (example cqlsh
Cassandra Query Language)
• Most Common using Relational DB (RDBMS)
Tools Makes You Better
• IDE
• Visual Studio
• Sublime
• Atom
• CLI (Command Line Interfaces)
• Linux Command
• Browser
• Debug HTML
• Debug CSS
• Debug Javascript
Jobs
• Front end dev
• Back end dev
• Full stack developer is a UNICORN
• Full time workers / remote workers
• Keyword : more talented you are the easier it will
be to find work.
• Twitter Company : almost 4000 (2016)
• Google Company : 72000 full time staff, 27000 RND
References
• Lynda.com : Web Development Foundations: Full-
Stack vs Front-End
• Stanford :
http://web.stanford.edu/class/cs142/lectures.html
