Skip to content

Contributing to Open Source #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,6 @@ The contribution guidelines are as per the guide [HERE](https://github.com/larym
| 35 | [Image to ASCII](https://github.com/larymak/Python-project-Scripts/tree/main/image-ascii) | [Lary Mak](https://github.com/larymak) |
| 36 | [Password Validator](https://github.com/larymak/Python-project-Scripts/tree/main/password-validator) | [Emmanuel Tanimowo](https://github.com/Mannuel25) |
| 37 | [Text to Audio](https://github.com/larymak/Python-project-Scripts/tree/main/texttoaudio) | [Azmine Toushik](https://github.com/azminewasi) |
| 38 | [Number Guessing Game](https://github.com/Mannuel25/Python-project-Scripts/tree/main/Number%20Guessing%20Game) | [Emmanuel Tanimowo](https://github.com/Mannuel25) |
| 38 | [Number Guessing Game](https://github.com/Mannuel25/Python-project-Scripts/tree/main/Number%20Guessing%20Game) | [Emmanuel Tanimowo](https://github.com/Mannuel25) |
| 39 | [Web Dev with python Flask](https://github.com/deepaksaipendyala/Python-project-Scripts/tree/main/Web%20Dev%20with%20Flask) | [Deepak Sai Pendyala](https://github.com/deepaksaipendyala) |
| 40 | [password breach checker](https://github.com/deepaksaipendyala/Python-project-Scripts/tree/main/passwordbreachchecker) | [Deepak Sai Pendyala](https://github.com/deepaksaipendyala) |
21 changes: 21 additions & 0 deletions Web Dev with Flask/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2021 Deepak Sai Pendyala

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
122 changes: 122 additions & 0 deletions Web Dev with Flask/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
# I have built my Portfolio website :relaxed:
### Link?
[Website hosted with python flask as Back-end server](https://deepaksai.pythonanywhere.com)
##### I successfully worked on the back-end with Python flask, and now I'm working on the front-end with very basic HTML, CSS, JS knowledge. OFC, using templates!

## So, how do websites work?
Here I'm going to focus on the python side of things. But I want to help you understand what we're building and how everything works. Hopefully, you're able to actually change your portfolio to your own liking and showcase yourself. So I have a website for you here, we have www.google.com; if I click refresh here or enter this URL, I'm taken to this Website, but

### Note:
If you are a person who doesn't wanna follow the below steps to build a web for yourself, then do Hire me as a Freelancer:blush:
I'll work it out for you:wink:
### How does this actually work?
How is my browser, ex. Google Chrome, able to display this Web page for me? I need to be connected to the Internet. So, there's some sort of data that's being transferred for me to be able to see this. So, let's explore how this works.

![How websites work](/readme%20media/1.png)


In this pic, I'll attempt to tell you exactly how it works. It's quite simple. We have our browser right here, which can be Google Chrome, SAFARI, Firefox. It doesn't matter. In this browser, we can type into it a website or maybe Google for a website and then click on a website when we click on a website. What happens is that through Internet, the browser makes a request all the way to another machine. And this machine, which we call a server, is located anywhere in the world. It doesn't really matter because, through our Internet network, the browser will say, hey, this website, who owns that website or which machine can serve me the files for that website? And using some complex logic, it's going to find this server, which is just a computer at the end of the day. We're actually going to see how to deploy our own server. Well, it simply says, hey, give me some data, because, without data, I'm not able to display anything on a webpage.HTML<CSS<JS is that data btw And the server, well, first of all, they communicate over something called HTTP? HTTPS because the browser and the server are two different machines, right? HTTP/HTTPS, which is a secured encrypted version of communication, allows me to access data belonging to a website
#### So, the request has just been made; this server just happens to have three files that we need.
### One is an HTML file :
This HTML file is the text or content of the website.
### The other one is the CSS file :
This CSS file contains all the styling of the website. So that is colours, maybe some fonts, maybe the position of the elements, anything to do with style. So, it doesn't look like a boring piece of text.
### And then we have JavaScript :
JavaScript is what gives websites behaviour. When I log into Facebook or maybe tweet something on Twitter, JavaScript is allowed me to perform those actions because, with just HTML and CSS, we just have the text and some pretty styling. With JavaScript, we can take action, but we don't need to focus on that too much.
### Do you think that this server has to be written in Python?
What do you think? No, it doesn't. The browser doesn't care what this machine is like. All it cares about are these three files. And because we're speaking in this HTTP/S protocol. The browser says, hey, I don't care what language you speak, I don't care anything, I'm just going to tell you through this. Just give me the data that I want, and we can do whatever logic we want in here. I can send emails from here if I want. I can send text messages. I can do math operations. I can play a game on this computer if I want.
It doesn't really matter as long as I can send these files back to the browser.

### So, we can start running the server right away with Python,
but we can do that with other languages like PHP, Java; we can write a server in any type of language.

## Youtube Video on 'How I made this will be updated soon here! Meanwhile, check out my other projects.


### I successfully worked on backend with Python flask and now i'm working on frontend with very basic HTML,CSS,JS. afc, using templates!

## To built your website based on my code, Do follow the instructions:
all are windows based cmds, i'll link documentation. follow it as per your os.
1. Clone this Folder as it is!\
we are going to do this in Virtual Environment.
2. go to dir of this portfo\
```py -3 -m venv venv```\
``` venv\Scripts\activate```\
```pip install Flask```\
```set FLASK_APP=hello.py```\
```$env:FLASK_APP = "server.py"```\
```$env:FLASK_ENV = "development"``` This will turn on Debug mode and changes made to our page will auto attached to flask app!\
```python -m flask run ```\
Now head over to http://127.0.0.1:5000/, and you should see my website running on your local server i.e your pc.\
if you dont see, then something went wrong! do contact me for quick solve!\
[Documentation](https://flask.palletsprojects.com/en/1.1.x/quickstart/)

### NOTE: Do edit or replace the HTML,CSS,JS according to your needs :)

### We have our flask application.
nicely,Right?We have a beautiful website. We even have contact forms which will get saved to csv and text file(encoded into server.py)\
But there's a problem here. You see, we're running the browser as well as the server on the same computer.But this isn't real life because if I give this URL to a friend, they're not going to be able to see it because this Address points to a local host. It's the same thing,local host simply means your computer, so it's not like anybody else but us can access our app. That's not very fun, is it?\
Ideally, we can create this app so we can send it to all our friends, our family members and possibly future employers.\
Stick to me, We got this buddy!

### So how can we do this?
From here, I'm going to show you a really fun, easy way to deploy your application or your website online. We're going to use something called [Pythonanywhere](https://www.pythonanywhere.com/), and [Pythonanywhere](https://www.pythonanywhere.com/) is going to allow us to host our files. That is all the files that we have here onto a server that they give us for free. So this is completely free. All you have to do is simply log in. And you can click on sign up, you can see that they have a different pricing plan, so you can actually pay for their service. But for a beginner who plan to create one Web application, we can do that for free.\
So let's create a beginner account and create your username and password. - [Pythonanywhere](https://www.pythonanywhere.com/)\
We have our dashboard. Now, the way Python, anywhere it works is that we need to load up the files on a machine, like how we have our files over here on our computer. We need to somehow upload them to Python Anywhere's computers. Now, the way we can do that is using GitHub.


3. Now, Upload everything on github like me!\
steps intended:
- 1. open your GitHub account
- 2. click on new repositories and create new project here, so let's just call it. Portfo, because it sounds kind of cool and all the trendy names are short like this, so this is your portfolio project, keep it public and then initialise with readme and then create a repository.
- 3. copy CODE->CLONE->HTTPS->LINK
- 4. Now, from here, I'm going to clone. but How? as always, follow me!
- a. Go to Terminal and remember we are in Portfo Directory or else go to Portfo directory
- b. git clone LINK
- c. go to git cloned folder and pastic all your files and folders except "_pycache" ,"venv".
- d. go to Cloned directory in cmd/powershell ( ```cd portfo\```)
- e. ```git add.```
- f. ```git commit -m "comment on update```
- g. ```git push origin master``` or this it showed some error then ```git push```
Now go to github repo and BOOM! uploaded.

4. go to [Pythonanywhere](https://www.pythonanywhere.com/) Dashboard and click on bash then [Pythonanywhere](https://www.pythonanywhere.com/) bash terminal opens up!
- 1. ```git clone LINK``` link -> 3.3
- 2. check all the files with ```ls``` -> ```cd porfo/``` -> ```ls``` or head over to dashboard again -> files -> portfo
- 3. head over to dashboard -> webapp -> add a new web app -> next -> manual -> py 3.6 -> webapp page
There we go, we have our Python project at this given address.-> (your username).pythonanywhere.com
But if I click on this. All right, I get a hello world, it's working, but this isn't our portfolio, so how can we make that work?
There's a few things that we need to set up.
[Documentation for setup](https://help.pythonanywhere.com/pages/Flask/)
**But i'm going step by step:**
- 4. head over to webapp page -> CODE -> Source code -> enter ```portfo``` then it auto set to path in 4.2
- 5. head over to bash then execute the below cmds
```mkvirtualenv --python=/usr/bin/python3.6 my-virtualenv```
```pip install flask```
```workon my-virtualenv```
```pip install -r requirements.txt```
- 6. head over to webapp page -> WSGI configuration file: -> xx_wsgi.py <- open \
clear everything! as we were working with flask, we do as below
```py
import sys
path = '/home/deepaksai/Portfo' #yoursername->deepaksai i.e project path
if path not in sys.path:
sys.path.append(path)

from server import app as application
```
- 7. click save and click reload

5. :boom: our website is now live.\
forms will be saved into csv file and text file

### NOTE:
Do contact me for any projects or to hire me :)\
html templates are from HTML5UP

### -- SIGNING OFF --
# DEEPAK SAI PENDYALA




1 change: 1 addition & 0 deletions Web Dev with Flask/database.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
name,email,message
1 change: 1 addition & 0 deletions Web Dev with Flask/database.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Database in txt format for beginners
Binary file added Web Dev with Flask/readme media/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Web Dev with Flask/requirements.txt
Binary file not shown.
48 changes: 48 additions & 0 deletions Web Dev with Flask/server.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# @author deepak sai pendyala
import csv
from flask import Flask,render_template,url_for,redirect,request
app = Flask(__name__)

@app.route('/')
def hello_world():
return render_template('index.html')

@app.route('/<string:page_name>')
def html_page(page_name):
return render_template(page_name)

def write_to_database(data):
with open('./Portfo/database.txt',mode='a')as database:
name=data["name"]
email=data["email"]
message=data['message']
file=database.write(f'\n {name},{email},{message}')

def write_to_csv(data):
with open('./Portfo/database.csv',mode='a',newline='')as database2:
name=data["name"]
email=data["email"]
message=data['message']
csv_witer=csv.writer(database2,delimiter=',',quotechar='"',quoting=csv.QUOTE_MINIMAL)
csv_witer.writerow([name,email,message])


@app.route('/submit_form',methods=['POST','GET'])
def Sumbit_form():
if request.method=='POST':
try:
data=request.form.to_dict()
write_to_csv(data)
return redirect('/thankyou.html')
except:
return 'didnt save to database'
else:
return 'woops,Something went wrong'


# set FLASK_APP=server.py
# $env:FLASK_APP = "server.py"
#python -m flask run

#$env:FLASK_ENV = "development"
#python -m flask run
5 changes: 5 additions & 0 deletions Web Dev with Flask/static/assets/css/fontawesome-all.min.css

Large diffs are not rendered by default.

24 changes: 24 additions & 0 deletions Web Dev with Flask/static/assets/css/images/intro.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading