Create a responsive web app with Django or jQueryMobile? - python

I have a bigger project to handle, so this is what I want to do:
I have a Server with an MySQL database and Apache webserver running on. I save some machine information data in the database and want to create a web app to see, e. g. if the machine is running.
The web app should be designed responsive, i. e. changing design in accordance to the screen resolution of the current used device. This is important because the app will be used from smartphones and tablets mainly, but should also work on a normal pc.
I wrote a Python programm for my machine to get the data, and another Python programm on my server receiving information and saving in the database.
So my job now is to create the "responsive website" for my smartphone etc.
Then I want to broadcast this with my webserver.
Another Point is, that the web app should be build dynamically.
If I add another machine to my database, it should appear on my web app to be clickable and then show the related information.
First I thought about doing this in HTML5 and CSS3, with the use of jQueryMobile.
But I never used javascript. I'm just experienced in the "old" HTML and CSS.
Is Django a better choice, since I'm quite experienced in Python?
Or do I need both perhaps?
I haven't worked with any webframework yet, please help me choosing.
Or do I need one at all?

It looks like your server layer is OK for getting server informations and storing informations in database. Done with python.
And now, if I can resume, you need :
a reponsive web client
notification features
dynamically able to display new set for html elements
Based on this, I doubt in the fact that you will find a complete already packaged solution. Django should have this kind of features but it is not my favorite approach for such custom requirements.
If I have to do this I would use :
NodeJS for serverside code managing notifications
AngularJS for clientside managing client (!) and clean dynamic DOM manipulation with directives.
CSS Framework like Foundation or Bootstrap where responsive is native
What I would do is :
Init Phase
install nodejs and yeoman
initialize an angular app
write basic nodeJS server with a basic HTTP service
test your HTTP service with curl & your app with chrome or FF
Integration Phase
write basic angular HTTP call to this service
add communication between Node and Python (See
Combining node.js and Python
or something like this)
Client & Look and feel phase
add CSS framework for responsive and use it (navbar, table...)
look at Angular directives, develop a directive for adding new DOM elements
Finish / Clean your code and rollout

My solution now is as follows:
I will use the bottle microframework for generating serverside dynamic html-pages on request.
This will cause me to reload the page everytime I want to see new machine information, but for now it is enough for me.
Later I can add AJAX for live monitoring (I know this is javascript, I think I have to learn it anyway.)
Thanks for your solutions though.

You can put Bootstrap too for making responsive website.
Follow the code below code in your index.html in Django template.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head %}
:
:
{% endblock %}
{% block body %}
.
.
.
{% endblock %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</html>

Related

saving a dash layout to html file [duplicate]

I plotted a bunch of things in a dash layout. I want to save them to an html file so I can look at them later. when I reopen the saved html file, I first see everything correctly. However, within <1s, the page goes blank and I get an error: “Error loading layout”. (see gif below)
How can this be fixed?
Thanks!
This solution is not fully working:
You have to save your Webpage complete.
To prevent the javascript creating any errors
i have removed the bundle(2).js file.
This file contains the function dash_renderer which tries to interact with the server and creates issues.
<footer>
<script id="_dash-config" type="application/json">{"url_base_pathname": "/", "requests_pathname_prefix": "/"}</script>
<script src="./Dash_files/react.min.js"></script>
<script src="./Dash_files/react-dom.min.js"></script>
<script src="./Dash_files/bundle.js"></script>
<script src="./Dash_files/plotly-1.38.0.min.js"></script>
<script src="./Dash_files/bundle(1).js"></script>
<!-- <script src="./Dash_files/bundle(2).js"> --></script>
</footer>
The result is the same page as you can see for ~1s.
Big disadvantage: The interactivity from plotly is lost.
A Dash app layout is serialized as JSON and served to the front-end by the Dash server (an extension of a Flask server).
All Dash components included in your layout are bundled as JS/CSS files. These bundles are also served by the Dash server to the front-end.
Without the server, there is no one to send JSON, JS, CSS bundles to the front-end, so nothing will be rendered.
I'm not sure why you can see your app for a brief moment. My guess is that Dash saves a PNG image of your app every time you run it. Think of it like a splash screen you see before the real, reactive app shows up.
Have a look at this high-level overview on how Dash works under the hood.

Execute Python Command from HTML template using Django

I'm making a web interface for my Raspberry Pi using Django.
I'm trying to execute python code which lights up a display by simply clicking a HTML button inside a Django Template.
I currently light up the LED display by running this on command line:
cd rpi/
sudo python bubbles.py
Which executes that ^ python code
However I might want like to change the .py file depending on the HTML ID:
sudo python file_name.py
Anyways, this script needs to be executed via web browser so I wrote a view ...but I have no idea how to link a script to a view.
My template:
graphics_list.html
{% extends "base.html" %}
{% block content %}
<h1>{{ title }}</h1>
<h1> Scrolling Raspberry Pi LED Selection </h1>
{% for obj in object_list %}
<h3><a href='{{ obj.get_absolute_url }}'>{{ obj.name }}</a></h3>
<img src="{{ obj.image.url }}" alt="..." class = "img-responsive"><br>
<p>Use</p>
{% endfor %}
{% endblock content %}
I really don't know where to begin, should I use AJAX for this, PHP?
Instead of answering your code question, I'll answer your approach question.
To run this script from the internet, you need a web server. This will be the agent that handles your web (HTTP) requests. These come on all sorts of flavours. Django is a web framework, designed for creating complex web sites easily. Django also comes with a web server which it uses to serve its content.
The most relevant part to you will be this: Django is overkill for your goal. It may cause confusion, but if you've already got it up and running, it may also be best to stick with it. If you're not comfortable with running a webserver, using Django's may save you time.
I'd start by breaking down the problem into smaller goals, like this:
Get the Django webserver started. Just enough to see some kind of Django sample page when you access the server from your web browser.
Learn how to edit the models.py so that you can "render" (show in the browser) whatever view you want.
Make the VIEW mentioned above have a link to another url (still on your web server). This will trigger a request to your server for a different url. This url will be handled by a different method in your models.py, which in turn will render some other view. For now, imagine this other view displaying "Yes, youve lit the LED" or "LED lighting completed". The new method needed to render this view will be where you hook your code into for running your script.
Instead of running the script, just print something to the console to ensure that your "hook" is working. print "***** SOON ILL REPLACE THIS WITH WHATEVER IS NEEDED TO RUN MY SCRIPT ****" and look for that in the console
Then learn how to execute python from Django, and drop it in there.
The solution is here: Executing Python script from Django shell
What about AJAX? Ajax for you will result in a slight user-interface improvement. I'd forget it entirely until you've got the core solution working. It is by no means required to run a script from the web.

Website for machine design calculations

I wish to create a website to compute simple stress calculations for machine design. I have attached a sample below. What tools do I need to build something like what I have shown in the attached image. I want the user to perform the calculation, save for later use and print it in the form of a report. Please note the items in boxes are user input.
Looks like you want to create a web app. If your language of choice is python, you can use the Django web framework. Web frameworks like Django and Ruby on Rails help organize your files for websites. You can create a web app using Django but all your python code will be running on the server. Any calculations would need to be sent as a request to the server and returned to the client. JavaScript runs on the client computer and would be better for your application. You can also store cookie data in the client computer to access later. In addition you should know some html and CSS to display your app. The html, CSS and JavaScript can all be implemented in the Django framework.

How to create a login screen using core python language

I need to develop a simple login page using Python language with two fields and a button, like:
Username, Password, Login
I know there are some beautiful Python frameworks like
Django, Grok, WebPy, TurboGears
which support web development using Python, but mine is a basic requirement consisting of only 3 screens (pages):
1st page - Login page (Redirects to 2nd page when login button is clicked)
2nd page - Page with records in the form of a list, with an option for adding new records (Redirects to 3rd page when "Add Records" button is clicked)
3rd page - Page with fields, which are saved as records for the list on 2nd page (After entering details and clicking Submit)
So, I have decided to develop the above functionality using Python without using any framework, so that I can have flexibility as well as write my own code.
Is it possible to create a login page using Python without using a framework?
I haven't worked on web services and don't know the basics of web development in Python.
If possible, can you provide me an example on how to create a login page using Python and achieve the functionality described above?
Firstly, it's good to learn how to do things without the frameworks, but if you're doing this for anything but educational purposes it's most likely a mistake to say "my requirements are too simple to bother with frameworks." What you describe is on the simpler end of the spectrum, but already I can see some complications you're probably glossing over.
Anyway, to implement your 3 pages, you will need:
a web server
2 static HTML files
python handlers for GET on 2nd Page, POST from 1st and 3rd Page
storage (either flat file or database)
Look at A Simple Python CGI Server Tutorial to get started, and there are more details at TutorialsPoint: Python - CGI Programming.
Your HTML forms just need to have method="POST" and action set to the URL you're serving from python for each form. Your POST handlers should do what they need to do and then serve a 302 redirect.
If you don't know the basics of python web development, you're going to have your hands full and should probably start with a single user flat-file system. Maybe you can even get away with storing that in memory for now. Then if/when that stops doing it for you, try sqlite. Configuring web servers is a pain, too, so if you can just stick with BaseHTTPServer.
Finally, load your records in another python endpoint, make some HTML for each, slap it in a big string with surrounding HTML, and serve that puppy.
You requirement is very trivial. Though people may suggest micro frameworks like flask, bottle I would say you should try Django and have a look at Django Admin Panel. I think it's possible for you to meet your requirement using the Django admin feature.
Updated
Have a look at this http://docs.python.org/howto/webservers.html
Without a framework and if you don't want to mess with CGI you can take a look at http://webob.org/ .

Python - Want to change header logo based on url selection

I would like to change the logo of a website based on which menu is currently activated/seen by the user browsing the website.
For instance I have www.urltowebsite.com/menu1 = Header Logo 1
And then I have www.urltowebsite.com/menu2 = Header Logo 2
And on top of this I want to add an else statement stating that: If any other menu is selected, use header logo 3.
How can I make this possible with Python? I cant seem to wrap my head around what to define where and how to call up the different functions on the HTML website.
Oh and I insist doing this with Python. And preferably without any framework such as Django. But if needs be I can install web.py
EDIT:
Am I forced to go with php then? I would like to once and for all start utilizing Python on my web projects.
The website is made in simple HTML as I said first. The Javascript functions are only used to serve the HTML menu's through AJAX. Again this does not matter much for what I am trying to do, as menu's have classes and I can define those in php and thus change my logo/header.
What I want to do is to use Python in this instance. Here is a code snippet from the site:
<div id="header">
<span class="title"><img src="http://www.url.com/subfolder/images/logo.png"/>
</span>
</div>
And some more relevant to this:
<div id="menu">
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
</ul>
</div>
So can I use python here?
You're asking to do the wrong thing the wrong way.
In order to change the logo based on the URL in Python , you need Python to generate the page and know what that url is.
There are two ways to do that in Python:
Use an existing Web Framework
Write your own Web Framework
"Python" doesn't know or care what your URL is - the frameworks and support libraries ( Django, Pyramid, Bottle, Flash, Tornado, Twisted, etc) figure out what the URL is by an integration with an underlying web server ( though some have their own webserver coupled in ). Similarly, PHP doesn't really know or care what the URL is - that information comes from an integration with Apache or FCGI/Nginx/etc. PHP tends to ship with most/all of that integration done. It's also worth noting that PHP is not just a language, but a web framework. Python is just a language.
Most Python frameworks will be written to the WSGI spec and have a "request" object that has all the data you want ( and many use the WebOb librbary for that ).
If you plan on doing everything with static HTML files, then you have a few options:
have a single static directory. use javascript to figure out the addressbar location, and render the corresponding logo / write the headers & footers.
have a "template" directory of all your HTML. use a Python script build a static version of each website with the custom headers/footers and configure your webserver to serve a different one for each domain.
No, Python cannot run inside the HTML web page. If you're really serving plain HTML pages then you must use javascript to execute code in the browser once the page is loaded. However, since you mention using AJAX, it sounds like it's not really true that you're serving plain HTML but rather have some server side code. If so, that server side code is the place to put your HTML-construction logic. To know the best way to do that, you would have to describe what's happening on the server.
Although I haven't used it, I have heard that the pyhp project more or less provides php-like embedded functionality for python.

Categories