1. Let's study web-development

1. Intro
CEOS Web-Development Study
Jungwon Seo
CEOS WEB-STUDY 2017-1

Coder and Proud!
1. The Reasons You Should Learn To Code.
2. Web Development?
3. Why Should We Start Programming With Web Development?
4. House vs. Web-site
5. How it works!
6. Why AWS? Why Python? Why? Why?
7. Summary

I Have Freedom to Make My Own
Schedule
I Earn More, But Work Fewer Hours
I Can Say “No” to Job Offers
People Come to ME Asking if I Can
Work for THEM
I Never Have to Deal with the Tedious
Online Job Application Process
I Have Extra Time to Pursue Interests
I Can (and Do) Work Remotely
It’s Easy for Me to Make Side Project
Dreams into Reality
I Am Part of a Top Secret Club (a.k.a., the
Tech Community)
I Have a Sense of Self-Reliance and
Empowerment
1. The Reasons We Should Learn To Code

2. Web Development?
Web development is a broad term for the work involved in developing a web site
for the Internet (World Wide Web) or an intranet (a private network)
- Wikipedia -
Web-Site
Homepage
Server
Database
Internet
Browser
Internet
Explore!!
Amazon
HTML
How many words have you ever heard?

3. Why Should We Start Programming With Web
Development?
1. It’s visible, so we can see immediately the result that we are making. 
(Otherwise, most of you people will get bored super easily….)
2. Web-development is still one of the biggest industries in the IT world. 
(Even A “zoo” has their own web-site.)
3. Server-side programming is kind of a mandatory for all the IT products. 
(Except some applications that you can use without a network connection)
4. Honestly, this is the only thing that I can teach you with the least hesitation. 
(So sad..)

4. House vs. Web-site (cont.)
Let’s say, that we are building a house.(a real house!!!)
To build a house, we need land, some bricks, steel, glass, cement, etc.
With these “resources” we can make this house! (next page)

If we make a web-site this way, using just with a server, html and minimum
style,  
it will turn out like this!
(next page)

But, this isn’t reeeeally what we want to build.
We need some cables for electricity to light up the bulbs, some gas pipes to
shower with hot water. (Oh, and don’t forget the water pipe!)
In the web-development world, these kind of resources are  
Server-side language(PHP, Node.js, Python,Ruby…) : to produce data  
Database(MySQL, MongoDB..) : to save data 
Web Server(Apache, Nginx..) : to receive and send data

These are what we built so far with the previous resources.(Okay, fair enough.)

But we are not living in the real world; We want to live in a super fancy house
like Tony Stark’s.
Great design, smart house system.
So , we need to use “Javascript” to make a dynamic web-site(in the
visualizing way) and “CSS3” to put some great design on your website.
12

So these are what we made.
13
<Slack>

In the real world, we are not able to own “Burj Khalifa”. 
(I’m sorry to be blunt.) 
 
But we can own the web-site like Facebook. 
(not the users, sorry again.) 
 
This is the beauty of the IT world.
14

“Come on! stop treating us like kids,  
We want to know what is happening
technically in the computer!”

5. How It Works! (Big picture)
Alright, no big deal. Let’s check out the below picture.
16
Server Computer(OS : Ubuntu)
Nginx
MySQL
Flask(Python)
uWSGI
HTML,CSS
Client Computer(OS :Windows)
Browser(Chrome) Loaded HTML,CSS
Server Side
Client Side

5. How It Works! (Server-side vs Client-
side)
Let’s just clear up something important there.
First of all, There is the ﬁrst big branch in the web development area.
We call them Client-Side and Server-Side.(Forget about the client that you are
familiar with!)
In web-development, “client” means, you and your browser. 
(In the mobile application, your android app and your iOS app) 
 
Server-Side is the server computer and server program (that you installed or wrote.)
18

side)
“Then, what is the server-side language, programming, programmer and client things
as well?”
Here is one of the most important concepts in web-development.
To distinguish these two parts, you need to understand,
where your code works!
Some people make mistakes, when they differentiate these two sides things.
19

side)
Mistake 1 : I wrote my HTML code in the server and it’s in the server, so it’s
server-side programming!
No, focus on the location that your code is being ‘executed’. In the server,
HTML is just kind of a text ﬁle. It doesn’t really do anything. It will be
activated in your browser.  
(When you visit some web-site, your browser will load their HTML and CSS
code, then interpret them to a graphical interface.)
20

side)
Mistake 2 : Java is a server-side language because it’s working in the
server(JSP)
How about Android? Like I said before, an android app is in the client-
side. So, it can be a client-side language too.
Programming languages are not born to be with their side originally. It is
changeable based on where they work.
21

5. How It Works! (HTTP)
Let’s take a look. When you type some site address in Chrome browser their server will
return the ﬁnal HTML code to your browser.
(There is a gray area that you don’t need to know right now, Let’s assume that there are
some unclear parts related with this area.)
22
Server
Nginx,uWSGI
(Gray Area)
Flask DB
HTML
Work ! Work!
Shake it!, Shake it!
www.example.com
Final Code

HTTP(HyperText Transfer Protocol) is the protocol that we are using in the
world wide web(between “Client” and “Server”).
There are two actions, “request” and “response”.
Literally, it’s a request and a response. 
(If you type some address in your browser, “request” will be requested to
some server, and that server will respond with their “response”)
23

Normally, ‘request’ looks like this. 
- http://www.example.com/post/3231 
(http://www.example.com/user/jungwon-seo, http://www.example.com/book/coder-and-proud) 
 
If we split this address(URI) with “/“, it will make more sense. 
 
- http : protocol that we are using.(Sometimes we can see ‘https’) 
- www.example.com : their domain, address. 
- post : ﬁrst parameter(it can be user, photo or book whatever. it depends on the developer.) 
- 3231 : second parameter, the post number 3231 among all the other posts. 
25

How about ‘response’?
It can be some code, numbers or just some text.
Therefore, now it depends on “Client”.
In the web-browser, if the response is the interpretable HTML code, then the
browser will show GUI(otherwise it will just show the text result.).
(To communicate with mobile applications, which are not using HTML to render the
GUI, developers normally code the server to return ‘JSON formatted data’)
26

Then how can a server decide what to return?
That’s what server-side programming is, and that’s what we are going to learn!
Before we get started, there is one attitude that we really have to have.
‘Logical decision’
There are tons of options we can choose from when we start to build a web-site.
You really have to be able to justify your every single choice. 
(It doesn’t need to be the best option)
27

Hosting : AWS(Amazon Web Service)
Why?
- AWS is the most famous cloud service in the world.
- AWS has many convenient functions that can help us to build websites easier.
- We can use a limited version for free for one year.(it’s enough)
28

Sever-side language : Python
Why?
- Python is super easy to learn.(compared to other languages)
- Python is being used in many programming areas(Ex: data-mining)
29

Sever-side Framework : Flask
Why?
- There are two options that we can choose from (Django, Flask), however, Django
is too structured to learn other things. 
(Ex: ORM is super cool, but we have to learn mysql query too!!)
30

Database : MySQL
Why?
- Mysql is kind of an essential Database 
(NoSQL things are not substitutes, they are supplements.
- We just have to learn!!(most companies are using it!!)
31

7. Summary
- Now we know ‘brieﬂy’ how it works.
- Server-side, Client-side
- HTTP
- Logical decision
Next Lecture:
- Building web-server.
32

1. Let's study web-development

More Related Content

What's hot (20)

Similar to 1. Let's study web-development (20)

Recently uploaded (20)

1. Let's study web-development