Web Dev Bootcamp TIL Day-2(jQuery/Flask/pyMongo/Terminal)

jQuery and Flask basics for building API for server and client interaction

 

Sample Ajax Get Code(client)

• included inside a function within <script></script>tag of the index.html file that we use as a template
• allows us to verify whether or not data is being retreived

$.ajax({
type: "GET",
url: "/test?title_give=봄날은간다",
data: {},
success: function(response){
console.log(response)
}
})

• In the above sample, we can consider /test as a reference to where we will retreive data.
• The title_give as the category name of the data we will receive
• 봄날은간다 is the actual data itself

 

Sample API GET Code(server)

• included inside the python file we use the run the application

@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

 

• In the above sample, the title_give is the category name of the data we will receive.
• We then assign the retreived data to a variable called title_receive.
• jsonify returns the a json data type back to the ajax code and stores it inside the variable named response 
• in this particular sample, we are returning a message that the get method has been implemented successfully upon implementation

Sample Ajax Post Code

$.ajax({
type: "POST",
url: "/test",
data: { title_give:'봄날은간다' },
success: function(response){
console.log(response)
}
})

• Retreives data in a manner that differs from the get method
• in the example above, it retreive sample data '봄날은간다' which is of type title_give then stores inside variable named data

Sample API Post Code

@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

• receives data of category type title_give and stores inside variable named title_receive
• returns json data type back to ajax call code and stores inside variable response
• in this particular sample, we are returning a msg post back to jsonify

---

Mars Project POST function

 

outline of sending data that was inputted from the frontend to our MongoDB using flask

 

- client side(ajax)

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: {name_give: name,
        address_give: address, size_give: size},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

• When the function save_order is called(usually when a specific button is clicked), we use jquery methods to store content from the html inputs and store them into respective variables.
• We then store these variables inside data w/ respective category names so that they can be accessed w/ the API

- server side(flask)

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }
    db.mars.insert_one(doc)

    return jsonify({'msg': 'POST 연결 완료!'})

• We pull/retreive the data we want w/ the respsective names we have given them in the frontend
• then we store those variables inside a dictionary format to send to our MongoDB server
• finally, we return a message to the frontend that the post method connection has been established

---

Mars Project GET function

- server side(flask)

def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'orders': order_list})

 

• We pull all the orders that are contained in our MongoDB database w/ no critieria and store it into a variable name order_list
• then we return these to the client side in a json format stored in a variable named response

 

- client side(ajax)

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i = 0; i < rows.length; i++){
                let name = rows[i]['name']
                let address = rows[i]['address']
                let size = rows[i]['size']
                let temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${address}</td>
                                        <td>${size}</td>
                                    </tr>`
                $('#order-box').append(temp_html)
            }
        }
    });
}

• we know that response is a json data type that contains all the order information
• using the key/value pair feature of python, we can store all order information inside a variable named rows
• we then use a for loop to iterate through each order information
• we store the name, address and size of each order information bundle into respsective variable names
• we create a temp_html variable where we create the html structure we will append to our order-post box in order 
  • note that we use string interpolation

 

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

---

Web Scraping using BeautifulSoup package

import requests
from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

title = soup.select_one('meta[property = "og:title"]')['content']
image = soup.select_one('meta[property = "og:image"]')['content']
desc = soup.select_one('meta[property = "og:description"]')['content']

• Using requests and bs4 package, we can store the html content of a web page using the framework above
• We can use then use key:value pairing mechanism to access the meta data of the html content
• In the example above, we are storing the title, image and description of a movie given its url link

---

Some Basic Terminal Commands

 

#accessing virtual ubuntu computer 

ssh -i (keypair) ubuntu @(publicipv4address)

 

#list computer files

ls

 

#change directory:

cd

 

#remove file

rm (filename)

 

#remove a non-empty directory

rm r- (directoryname)

 

#remove an empty directory

rmdir (direcotoryname)

 

# python3 -> python

sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

 

# pip3 -> pip

sudo apt-get update

sudo apt-get install -y python3-pip

sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

 

#port forwarding

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

 

#quit

ctrl + c

 

#allowing virtual server to run while terminal is not running

nohup (applicatoin file name) &

 

#forcequitting server

ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

 

#terminating server

sudo kill $(sudo lsof -t -i:4200)

 

---

Pymongo code to push/pull data from MongoDB

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})