![\"Michael](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/04\/MIKE-IMAGE.jpg\")
<\/p>\nMichael Aboagye is a backend software\/security engineer based in Ghana. <\/b>He is interested in building secure backend services with Python.<\/b><\/p>\n
<\/p>\n
In this tutorial, we will look at how we can build a diary web application based on the flask framework with Couchbase as the backend server. <\/span><\/p>\n By the end of this tutorial, you\u2019ll \u00a0be able to build a simple web application with the Flask framework to send users\u2019 details to a Couchbase server. In addition, you will learn how to set up and configure a Couchbase server.<\/span><\/p>\n Prerequisites<\/b><\/p>\n You need the following packages to run or clone the project from GitHub.<\/span><\/p>\n Flask framework is a micro framework written in Python. It is a micro framework because it does not come with a validation form, authentication mechanism, and so on. It allows you to customize applications in your own way.<\/span><\/p>\n Jinja template is simply a text file which contain variables and expressions, which get replaced when a template is rendered or displayed.<\/span><\/p>\n Couchbase Server is a scalable NoSQL document database. We will use the Couchbase server to store users\u2019 data. <\/span><\/p>\n First, create a directory to hold the virtual environment using <\/span>mkdir<\/span> command.<\/span><\/p>\n The command below creates a directory as<\/span> webproject<\/span> and changes it into the <\/span>webproject<\/span> directory<\/span>.<\/span><\/p>\n Afterwards, change to the diary directory to activate the virtual environment using the following commands:<\/span><\/p>\n Once we are inside the virtual environment, we can install packages without fear of conflicting with system packages.<\/span><\/p>\n In this section, we will install Flask framework written in Python and other packages needed for the project.<\/span><\/p>\n Let’s install the packages we need for this project using pip and dpkg.<\/span><\/p>\n In this tutorial, we will run Couchbase Server via Docker. You need to have Docker in your localhost or development machine to be able to <\/span>pull or download Couchbase images from <\/span>dockerhub<\/span><\/a>.<\/span><\/p>\n Navigate to the terminal and type the following to access the DockerHub repository:<\/span><\/p>\n Then you’re prompted to provide your credentials before you can access or “pull” images from DockerHub.<\/span><\/p>\n You need to run Docker commands as a root user.<\/span><\/p>\n However, if you prefer to install Couchbase Server manually, Couchbase provides two ways of installing for Debian-based and Redat distribution. <\/span>You can check it out on <\/span>Couchbase<\/span><\/a>.<\/span><\/p>\n <\/p>\n In order to access the Couchbase server, we need to download the Couchbase SDK client to access a Couchbase cluster. <\/span>Couchbase provides SDKs for programming languages such as Python, .NET, and Java.\u00a0<\/span>Let\u2019s download and install Couchbase SDK for Python using pip:<\/span><\/p>\n Once you have pulled Couchbase Server images from DockerHub, we can create and run a new container using the following command:<\/span><\/p>\n docker run: This command creates a container layer over the Couchbase image and starts it.<\/span><\/p>\n -d : \u00a0The -d flag means the container is run as a daemon<\/span><\/p>\n –name : This is the name for the new container<\/span><\/p>\n -p : \u00a0This flag is for port mapping<\/span><\/p>\n We are now running the Couchbase server in a container.<\/span><\/p>\n Inside your browser, visit https:\/\/localhost:8091 on your machine to configure the Couchbase server.<\/span><\/p>\n As you can see, we have options to create a new cluster or join an existing cluster. Let\u2019s choose the option to set up a new single cluster. <\/span>Set a Cluster name, create username for <\/span>Admin<\/span> and a password of 6 characters as shown below: <\/span><\/p>\n Let’s go with the default settings. We need to set the hostname or IP Address for our new cluster. We will not change the data disk, Indexes disk path, and Analytics disk path for the purpose of this project.<\/span><\/p>\n In addition, there is no need to alter memory quotas unless you don\u2019t have enough RAM.\u00a0<\/span>Finally, we are presented with two options: start the Couchbase server with default settings or configure memory and services.<\/span><\/p>\n Click on the button which allows you to configure memory and services for Couchbase Server. <\/span><\/p>\n <\/p>\n The Host Name or IP Address section allows you to set a hostname such as <\/span>localhost<\/span> or <\/span>192.168.15.12<\/span>. The Data Disk Path allows you to define the path.<\/span><\/p>\n Then <\/span>create a bucket<\/span><\/a> called \u201cusers-data\u201d via the Couchbase web console. <\/span><\/p>\n <\/p>\n S<\/span>till inside your virtual environment, create a file<\/span> named<\/span> app.py<\/b>. <\/span>Inside app.py file, copy and paste the following code:<\/span><\/p>\n In the code above, we imported Flask framework, and the Couchbase client for Python.\u00a0<\/span>Next, we connected to the bucket Users-data via the Couchbase client connect method. Then, we created a route for the homepage and create-memo page for users. <\/span><\/p>\n We can also create a route for the messages page. This page will display message submitted by a user. <\/span>Inside the \u201capp.py\u201d file, write down the following code to retrieve a specific user message from Couchbase server:<\/span><\/p>\n Still inside your project directory, create a subdirectory using the mkdir command as shown below:<\/span><\/p>\n Inside the templates directory, create home.html, savedmemo.html, and postmemo.html files with the touch command:<\/span><\/p>\n Paste the following code inside the home.html file:<\/span><\/p>\n <\/p>\n Paste the following code inside the memo.html file:<\/span><\/p>\n Inside the savedmemo.html file, paste the following code to render a form which will display forms with saved messages:<\/span><\/p>\n <\/p>\n Execute the following command to start the flask-based application as shown below:<\/span><\/p>\n Open your browser and navigate to the following url to display the page where you can submit details to the Couchbase server:<\/span><\/p>\n https:\/\/localhost.com\/home\/create-memo<\/b><\/a><\/p>\n Also, if you want to navigate to the page where users\u2019 messages will be displayed and can be edited or modified and saved before submitting to Couchbase Server, use the following:<\/span><\/p>\n <\/p>\n https:\/\/localhost.com\/home\/saved-messages\/:5000<\/b><\/a><\/p>\n <\/p>\n In this tutorial, we learned how to build a simple Flask-based diary application with Couchbase Server as the backend<\/span> where users can send data via a form to a Couchbase server.<\/span><\/p>\n You can download or clone the whole project from <\/span>GitHub<\/span><\/a> if you want to try it out.<\/span><\/p>\n\n
\n
\n
Create a Virtual Environment<\/b><\/h2>\n
mkdir webproject && cd webproject\r\nVirtualenv diary<\/pre>\n
mkdir webproject && cd webproject\r\n\r\nVirtualenv diary\r\n<\/pre>\n
Install Flask Framework and Other Packages<\/b><\/h2>\n
pip install couchbase\r\n\r\npip install jinja \r\n\r\nPip install flask\r\n<\/pre>\n
docker login\r\n<\/pre>\n
docker pull couchbase\/server\r\n<\/pre>\n
Download Python SDK 2.5 for Couchbase Server<\/b><\/h2>\n
pip install couchbase\r\n<\/pre>\n
<\/h2>\n
Configure and Start Couchbase Server<\/b><\/h2>\n
docker run -d --name db -p 8091-8094:8091-8094 -p 11210:11210 couchbase\r\n<\/pre>\n
![\"\"](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2019\/06\/build1-300x219.png\")
<\/p>\n![\"\"](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2019\/06\/build2-300x203.png\")
<\/p>\n![\"\"](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2019\/06\/build3-1-270x300.png\")
<\/p>\nWrite Server-side Code for Diary Application<\/b><\/h2>\n
from flask import Flask \r\nfrom couchbase import Couchbase \r\nclient = Couchbase.connect(host = \"localhost\", Password = \u201cPassword_here\u201d, bucket = \"Users-data\")\r\n\r\n@app.route('\/home', method=['GET'])\r\ndef home_page():\r\n return render_template('home.html')\r\n\r\n@app.route('\/home\/create-memo'), method=['POST'])\r\ndef create_memo():\r\n if method == \u201cPOST\u201d:\r\n diary = { \r\n \"memo\" : request.form[\"memo\"],\r\n \"year\" : request.form[\"year\"],\r\n \"month\" : request.form[\"month\"],\r\n \"day\" : request.form[\"day\"]\r\n }\r\n Key=uuid.uuid1.hex()\r\n user_doc=json.dumps(diary)\r\n client.set(key, user_doc)\r\n return redirect(url_for(\"index\"))\r\nreturn render_view(\"create.html\")\r\n<\/pre>\n@app.route(\u2018home\/saved-messages\u2018, method=[\u2018GET\u2019,\u2018POST\u2019])\r\ndef get saved_messages():\r\n\r\n Saved_messages = client.get(key)\r\n Saved_event = json.loads(saved_messages)\r\n\r\n \r\n if request.method == \u201cPOST\u201d: \r\n\r\n Saved_event.memo = request.form[\u201cmemo\u201d] \r\n Saved_event.year = request.form[\u201cyear\u201d] \r\n Saved_event.month = request.form[\u201cmonth\u201d]\r\n Saved_event.day = request.form[\u201cday\u201d] \r\n\r\n user_doc = json.dumps(diary) \r\n client.set(key, user_doc) \r\n return redirect(url_for(home_page))\r\n \r\n return render_template(\u201csaved.html\u201d, model=Saved_event) \r\n<\/pre>\n
mkdir templates\r\n<\/pre>\n
touch home.html create.html saved.html\r\n<\/pre>\n
<html>\r\n<head>\r\n<title>Welcome to Daily Memo Book<\/title>\r\n<\/head>\r\n<body>\r\n<h1> Remember Your Memorable Events<\/h1>\r\n<p>Welcome to the world of Flask!<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
<form action=\"\/home\/create-memo\" method=\"post\">\r\n <div>\r\n <label for=\"name\">Name:<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\"\r\n <\/div>\r\n <div>\r\n <label for=\"month\">Month:<\/label>\r\n <input type=\"text\" id=\"month\" name=\"month\">\r\n <\/div>\r\n <div>\r\n <label for=\"year\">Year:<\/label>\r\n <input type=\"text\" id=\"year\" name=\"year\">\r\n <\/div>\r\n <div>\r\n <label for=\"memo\">Memo:<\/label>\r\n <textarea id=\"memo\" name=\"memo\"><\/textarea>\r\n <\/div>\r\n<\/form> \r\n<div class=\"button\">\r\n <button type=\"submit\">Send your message<\/button>\r\n<\/div>\r\n<\/pre>\n
<form action=\u201d\/home\/savedmemo\u201d method=\u201dPOST\u201d> \r\n <div>Name: \r\n <input type=\u201dtext\u201d name=\u201dname\u201d values=\u201d{{model.Name}}\u201d \/> \r\n <\/div>\r\n \r\n <div>Month: \r\n \r\n <input type=\u201dtext\u201d name=\u201dmonth\u201d values=\u201d{{model.Month}}\u201d \/>\r\n <\/div> \r\n\r\n <div>Year: \r\n\r\n <input type=\u201dtext\u201d name=\u201dyear\u201d values=\u201d{{model.Year}}\u201d \/>\r\n\r\n <\/div> \r\n\r\n <div>Memo: \r\n\r\n <input type=\u201dtext\u201d name=\u201dmemo\u201d values=\u201d{{model.Memo}}\u201d \/>\r\n\r\n <\/div> \r\n <div> \r\n <input type=\u201dhidden\u201d name=\u201d\r\n\r\n\r\n<\/form>\r\n<\/pre>\npython app.py\r\n<\/pre>\n
![\"\"](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2019\/06\/build4-300x189.png\")
<\/p>\nConclusion<\/b><\/h2>\n