#### Repository
https://github.com/python

#### What Will I Learn?
- Session in flask
- Login and Logout system

#### Requirements
- Basic Python
- Install Python 3
- Install Flask


#### Resources
- Python - https://www.python.org/
- Flask - http://flask.pocoo.org/
- Jinja2 -http://jinja.pocoo.org/docs/2.10/

#### Difficulty
Basic

### Tutorial Content

In this tutorial, we will continue the previous tutorial related to data storage on our web application. In the previous [tutorial](https://steemit.com/utopian-io/@duski.harahap/web-development-with-python-5-store-cookie-and-get-cookie-in-template-1543593496200). We learned how to save data using *cookie*. The data that we store on cookies are only stored on our client's computer. so, of course, the data we store is not on the server side. Well, in this tutorial we will store data on the server side. we will implement it in the login system.

### Session in Flask

to store data on the server side we will use the session. we use sessions to store sensitive data and those that require security, and we will also prevent data from being manipulated by the user. in this tutorial, we will implement the session on the login system. 

- **Create a login system**

We will start using *sessions* on our login system. so later we will save the session user who has successfully logged in. the session that we will use to detect whether the user has logged in or not. to use a session we need to import and we have to make a ***secret key*** like this:

**secret_key:**

```app.secret_key = '34ujeifaj21mkll'```

***Secret key*** is random and determined by ourselves. so you can use a combination of *numbers, letters, punctuation* in **string** form. The secret key is used so that other people cannot manipulate our session, we can use the secret key in the``` app```.
<br>
- **Save session**

We have made the secret key, then we will save the session we will use. before you use the session we must import it first. We can save the session like the following:

**import session**
```
from flask  session
```

```
@app.route('/login', methods=["GET", "POST"])
def login():
	if request.method == "POST":
		resp = make_response("Your email is "+ request.form['email'])
		resp.set_cookie('email_user', request.form['email'])
		session['email'] = request.form['email']
		return resp
	return render_template('login.html')
```

We can save a session with an array type like this ```session['email']```, the **'email'** is the key. ```request.form['email']``` comes from the input post.
<br>

- **Redirect with session**

We have learned how to save sessions, now we will learn how to use the session to be used as a login system. so later we will redirect when the user is not logged in. Before we use the redirect function we must import it first. for more details, we can see the code below:

**import redirect**
```
from flask  redirect
```

**Route Login**

```
@app.route('/login', methods=["GET", "POST"])
def login():
	if request.method == "POST":
		resp = make_response("Your email is "+ request.form['email'])
		resp.set_cookie('email_user', request.form['email'])
		session['email'] = request.form['email']
		return resp

	if 'email' in session:
		email = session['email']
		return redirect(url_for('profileFunc', email = email))
	return render_template('login.html')
```

- Well we will use the ```session ['email']``` to detect users who are logged in. We can check whether the email session is in session this way ```if 'email' in session```.

- If the email session exists, then we will redirect to ```/profile/<email>```. We will redirect by passing the session value. to redirect we can use the ```redirect ()```.in the ```riderect ()``` we can use the url_for function to direct the URL to the destination. We can redirect the URL by calling the function used in the URL. like the following example ```redirect(url_for('profileFunc', email = email))```. The following is routing using the ```profileFunc()```:

**Route profile**

```
@app.route('/profile/<email>')
def profileFunc(email):
		return 'Welcome to my tutorial %s' %email
```


In this routing, we will receive the email parameter and we will use it to check whether the data we redirect has been successful. to see a discussion about URL parameters you can follow the following [tutorial](https://steemit.com/utopian-io/@duski.harahap/web-developement-with-python-3-get-method-query-parameter-and-navigate-routing-1543411189705).After all steps have been completed, We can see the results as shown below:

![ezgif.com-video-to-gif.gif](https://ipfs.busy.org/ipfs/QmeuDAu942Ta2BRbLRYTyRzej6ThErJD8YFB5kWCmciqQt)

as we saw in the picture above, now we can detect whether the user is logged in or not. If the user is logged in, we will return the user to ```return 'Welcome to my tutorial %s' %email``` and the parameters that we have passed can we appear  ```milleaduski@gmail.com```.

![Screenshot_1.png](https://ipfs.busy.org/ipfs/QmXbXpQg9w3yDojUV7ScfMAmdS4KWMhdWJ1ZjDqBCkmKZu)
<br>
- **Redirect to another page**

Now I will redirect users with different pages according to what we want, You can change its function like the following:

**Route Profile**

```
@app.route('/profile/<email>')
def profileFunc(email):
	return render_template('profile.html', email = email)
```

**profile.html**

```
<!DOCTYPE html>
<html>
<head>
	<title>Template Jinja2</title>
</head>

<body>
	<h1>This is the profile page</h1>
	<h2 style="color:blue;">Hai my name is {{email}}</h1>
	<a href="{{url_for('logout')}}">Logout</a>
</body>
</html>
```

Now we will be redirected to the profile page like the picture below:

![ezgif.com-video-to-gif (1).gif](https://ipfs.busy.org/ipfs/QmY83n3sysWEYBofUddtWxv4EB8392VdqZiD5Gf6ZLXQ7K)


### Logout and delete session

Now we need to create a system log out on the web application that we have learned. for that, we need to create a new routing task to log out the user who is logged in, so we can delete the session delete by accessing the route . for more details, we can look at the code below:

```
@app.route('/logout')
def logout():
	session.pop('email', None)
	return redirect(url_for("login"))
```

- ```/logout``` is the routing used to log out and the function is ```logout```

- to delete the session we are using we can use the **pop** function from a **session** like this ```session.pop()```. We can specify which session we will delete by passing it as the first parameter ```'email'``` and the second parameter we value is **none** and then we can redirect with ```url_for()```.
<br>

- **Add logout button**

In the frontend section, we need to add an interface so that the user can log out by clicking the button. Here is the frontend code:

**profile.html**

```
<!DOCTYPE html>
<html>
<head>
	<title>Template Jinja2</title>
</head>

<body>
	<h1>This is the profile page</h1>
	<h2 style="color:blue;">Hai my name is {{email}}</h1>
	<a href="{{url_for('logout')}}">Logout</a>
</body>
</html>
```

We can also use ```url_for()``` in the frontend section by access the logout function like this ``` 	<a href="{{url_for('logout')}}">Logout</a>```. After all stages are complete we can run our program and see the results as shown below:

![ezgif.com-video-to-gif (2).gif](https://ipfs.busy.org/ipfs/QmXqxwbvzYeEhgM5n2hTogKLmF5Q8B7x3aSikdCrKYXFTw)


W can see in the picture above we have created a login system using the session contained on the server. so the session that we made only lasted about 2 hours. we have also learned how to redirect and check sessions to give access to routing that we will use. I hope you can develop this web application. That is all from me. thank you



#### Curriculum

[Web development with python #1 : Flask initialization and Routing system](https://steemit.com/utopian-io/@duski.harahap/web-developement-with-python-1-flask-initialization-and-routing-system-1542726589553)

[Web development with python #2 : Templating jinja2 and Method POST on routing system](https://steemit.com/utopian-io/@duski.harahap/web-developement-with-python-2-templating-jinja2-and-method-post-on-routing-system-1542987551736)

[Web development with python #3 : Get method, Query parameter and Navigate Routing](https://steemit.com/utopian-io/@duski.harahap/web-developement-with-python-3-get-method-query-parameter-and-navigate-routing-1543411189705)

[Web development with python #4: Store cookie and Get cookie in template](https://steemit.com/utopian-io/@duski.harahap/web-development-with-python-5-store-cookie-and-get-cookie-in-template-1543593496200)


#### Proof of work done

https://github.com/milleaduski/python-web-app