Google Analytics gives a detailed insight about your website including how many people visited, time, demography, how many returning visitors and all such information. It’s a real important tool to have. All you have to do is create a Universal Analytics Tracking code and use it in a javascript code. The only problem is this code needs to be present in all the pages that you wants the analytics data for. So changing any part of the javascript code anytime, needs to be changed in all .html files.
However, there is a better way of doing it in flask. Create a file base.html and write the code:
Then using the property of jinja2 template extend this file in all the html files, i.e. {% extends ‘gentelella/admin/base.html’ %}. Thus now when you make some change in the above mentioned javascrpt code, you need to change it only in one place and it is changed in all other places.
We, like many other organisations, are using heroku as the deployment server for our project open event organizer server. Things are pretty simple and awesome when your project is in its beginning phase and things run pretty smoothly. But as your project grows, there comes some server problem. And one of the biggest problems as your project grows is memory. Now since various packages have a different amount of memory assigned to you in case of hosting in generic servers such as heroku, so it might result in memory quota exceeded. Recently, we faced such a problem. R14 – Memory Quota Exceeded. Took us quite some time to understand what and why and how this occurred. So let me share a few things I found about this error.
While we make websites were we need to upload images such as in event organizing server, the image for the event needs to be shown in various different sizes in different pages. But an image with high resolution might be an overkill for using at a place where we just need it to be shown as a thumbnail. So what most CMS websites do is re-size the image uploaded and store a smaller image as thumbnail. So how do we do that? Let’s find out.
Allowing web-user on apache server to run scripts as root
If you are new to this, you might be wondering, what the hell is a web user anyways?
So let’s say that you need a server which hosts a simple web page and does a particular task based on data entered into that web-page.
The normal way of doing this is to navigate to /var/www/html and place the web page you want to host here.
You also need to put your php script in this folder so that it is accessible from the website.
This php script will take in the data from your web-page and run the necessary commands that you need to be executed on the server.( I am assuming you are not using “TheReal Dev Language” for now. :p )
I will be using a simple web page and script that I have made for this post.
<html>
<head>
<title>Apk Generator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container"><br><br>
<form name="htmlform" id="form" enctype="multipart/form-data" class="col-md-offset-4 col-xs-offset-2 col-xs-8 col-md-4 form-group generator_form" >
<label for="name">Email</label>
<input type="email" class="form-control" id="Email" name="Email">
<br>
<input type="hidden" id="theme" name="theme" value="light">
<label for="name">App's Name</label>
<input type="text" class="form-control" id="App_Name" name="App_Name">
<br>
<label> Choose your data source </label>
<ul style="list-style-type:none">
<li><input type="radio" name="datasource" value="jsonupload"> Upload your own JSON files </input></li>
<li><input type="radio" name="datasource" value="eventapi"> API endpoint of event on OpenEvent </input></li>
</ul>
<br>
<section id="eventapi-input" style="display:none;">
<label for="apiendpoint">Link to Open Event API endpoint</label>
<input type="url" class="form-control"
id="Api_Link" name="Api_Link">
</section>
<br>
<section id="jsonupload-input" style="display:none;">
<input type="file" name="uploadZip" id="uploadZip" class="form-control"/>
<br>
</section>
<br>
<input type="hidden" name="assetmode" value="download">
<center>
<br>
<div id="status"></div>
<br>
<tr>
<td colspan="5" style="text-align:center">
<button type="submit">Generate and Download app</button>
</td>
</tr>
</table>
</form>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$('input:radio[name="datasource"]').change(
function() {
if ($(this).is(':checked')) {
if ($(this).val() === 'mockjson') {
$('#jsonupload-input').hide(100);
$('#eventapi-input').hide(100);
}
if ($(this).val() === 'jsonupload') {
$('#jsonupload-input').show(100);
$('#eventapi-input').hide(100);
}
if ($(this).val() === 'eventapi') {
$('#eventapi-input').show(100);
$('#jsonupload-input').hide(100);
}
}
});
var $ = jQuery;
var timestamp = Number(new Date());
var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
var ary = $(form).serializeArray();
var obj = {};
for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
console.log("JSON",obj);
if(obj.Email == "" || obj.App_Name ==""){
alert("It seems like you forgot to fill up your email address or the app's name");
setTimeout("location.reload(true);", 1);
}
else{
alert("Please wait while we generate the app, meanwhile you can stick around to directly download it.The app will also be emailed to you.");
$.ajax({
type: "POST",
url: "/test.php",
data: { timestamp : timestamp },
success: function(response){
console.log("Success",response);
window.location = response;
}
});
}
});
</script>
</div>
</body>
</html>
This is basically a web page with some inputText widgets which accept response and send it to a php file named test.php on the server via an AJAX post.
This php script will call a bash script which in turns an email to me with the user’s timestamp as the subject.
Well, here is where the problem arises, as I am trying to run the bash file as root.
You might wonder as to why is this such a big issue?
Why can’t we do that?
Well, we can surely do that on the server but the point to be noted here is that we are not running this script directly from the server.
We are running it from a web page which is hosted on a server.
So our user here is a web user aka www-data rather than being a root user.
The web user is not provided root access by default, but there are ways to get this done.
Solution 1 :
Allow the web user to run only specific scripts as root.
Please note that this is not a ideal workaround.
Ideally your web user should not have root access in any case.
Since that’s cleared up, lets proceed.
This can be done by editing your sudoers list and adding www-data to it.
Open up your terminal and enter the following command.
sudo visudo
Next up, navigate to the end of the file and add the following command there
www-data = (root) NOPASSWD: /path/to/script.sh
In case you have to execute one script as root which in turn executes some more scripts as root, you don’t need to set the path to all of them over here.
Doing it only for the parent script will do the job.
Solution 2 :
Using SuExec
DigitalOcean blog has a very good article on how to execute python scripts as root via the web user through cgi.
We had to implement the following modules in our system
Ticketing
Payments
Donations
However we wanted the super admin to enable or disable the modules. Hence we implemented the module system so that all three of them can be switched ON/OFF. The following screenshot will help understand better:
So basically we have switches for all three modules. If ticketing is enabled only then can we see the payment and donations system because those two are part of the ticketing system. I created a module database table for storing the values in the database. To store the switch states I implemented the following javascript code:
<script type="text/javascript">
var modulesForm = [{}];
Array.prototype.setIncluded = function (field, state) {
this[0][field].include = state ? 1 : 0;
};
function includeClick(button) {
var $row = $(button).closest("tr");
var $button = $(button);
if ($button.data('group') == 'modules') {
modulesForm.setIncluded($row.data('identifier'), button.checked);
}
persistData();
}
$(function () {
$.each($(".modules-options-table").find('tr[data-identifier]'), function (key, row) {
var $row = $(row);
modulesForm[0][$row.data('identifier')] = {
include: $row.find('.include-switch')[0].checked ? 1 : 0
}
});
$('[data-toggle="tooltip"]').tooltip();
persistData();
});
function persistData() {
$("#modules-value-form").attr('value', JSON.stringify(modulesForm[0]));
}
</script>
If a module is enabled i.e. if the module is included then the corresponding “include switch” is “checked” and then added to the modulesForm dict. In same way each value of the switch is added. Thus the dict will contain values for each switch/ module in the form:
Now the only thing left to do is to iterate through the list and check if the module is included or not. Here is the code which does it:
class SuperAdminModulesView(SuperAdminBaseView):
@expose('/')
def index_view(self):
module = DataGetter.get_module()
include_settings = []
if module:
if module.ticket_include:
include_settings.append('ticketing')
if module.payment_include:
include_settings.append('payments')
if module.donation_include:
include_settings.append('donations')
return self.render('/gentelella/admin/super_admin/modules/modules.html', include_settings=include_settings)
@expose('/save', methods=['GET', 'POST'])
def modules_save_view(self):
create_modules(request.form)
include_settings = []
settings = request.form.getlist('modules_form[value]')
if settings[0][24] == '1':
include_settings.append('ticketing')
if settings[0][49] == '1':
include_settings.append('payments')
if settings[0][75] == '1':
include_settings.append('donations')
return self.render('/gentelella/admin/super_admin/modules/modules.html', include_settings=include_settings)
“settings” is the dict which we get from the modules page. “settings[0][24]” refers to the include value of ticketing, “settings[0][49]” refers to the include value of payments and the next for donations. Thus depending on whether it is 1 or 0 we add strings ‘ticketing’, ‘payments’ and ‘donations’ to the included_settings. Similarly the create_modules(form) adds the values to the database to store it.
def create_modules(form):
modules_form_value = form.getlist('modules_form[value]')
module = DataGetter.get_module()
if module is None:
module = Module()
if str(modules_form_value[0][24]) == '1':
module.ticket_include = True
else:
module.ticket_include = False
if str(modules_form_value[0][49]) == '1':
module.payment_include = True
else:
module.payment_include = False
if str(modules_form_value[0][75]) == '1':
module.donation_include = True
else:
module.donation_include = False
save_to_db(module, "Module settings saved")
events = DataGetter.get_all_events()
if module.ticket_include:
for event in events:
event.ticket_include = True
save_to_db(event, "Event updated")
The Open Event project of FOSSASIA’s consists of a group of applications which involve making an application for managing events including the Open-Event Webapp, the Open-Event Android, Open-Event ios, and Open-Event Server of which I am working on.
The Open-Event Server is responsible for handling all the backend or the database aspect of the Open Event application. All the data for the application – the user details, the sessions details, the event details etc… is being managed by the server. But up till now we only had a basic working server with an prototype UI. In short not ready for people to use for their events . Thus my project was developed – Improving the Open-Event Organization project.
What is my project about?
The first versions of Open Event Server and the other subprojects – the Webapp and Android were not based on a user experience. So what we did this time was to create a user story for each of the projects. For the server, we created a user story wherein we decided what all functionalities will a user encounter when he /she uses our server. Thus step by step our project is being developed based on the user story created.
I have already solved a lot of issues which involve both – adding code to the backend as well as the frontend aspect. We have now a pretty good and properly functioning server with a login system involving Google and Facebook supported login. We also have a very awesome UI all thanks to gentelella. Presently we are working on the sessions part of the event creation wizard which is broken in various stages – Draft, Call for Papers, Schedule, Completed. The Draft part is almost finished and the Call for Papers part is going on.
You must be logged in to post a comment.