Creating a web application with a MongoDB backend and Docker

This is a bit of a POC that turned into a project.

I was playing with MongoDB to create a front-end that would store data in a user friendly way. I didn't want to take on things like WordPress or others, and had an idea for a note taking application that could be on-prem, and put teams or catalogs first with grouping.

I think there is quite a bit more that could be done, like adding reminders/due dates to the posts/notes and adding more management to groups so new authors can add more people to a project/group. For now this is being used to demonstrate the capabilities of PHP with MongoDB.

A killer feature in MongoDB is the ability for it to not need to be primed in anyway. This feature allows for this app install using Docker to exist. In a traditional/relational database a user needs to setup the database and table structure in order for data to be inserted. With NoSQL/MongoDB you can just point an app at the DB and with the correct credentials start adding and editing a whole DB in the service itself. This is what I do in the initial login screen. I check if the DB and admin exist, and if not, they get automatically populated so a user on a completely fresh install can just start using the application. 

Currently this application is far from perfect, but I hope it helps users get an idea of what an be done using PHP, HTML, CSS, and MongoDB together. I also hope it can be useful, and if anyone requires additional assistance, please feel free to leave comments on the GitHub page. I am not at the caliber of a professional open source developer, and have limited time, but I am interested in the feedback, and willing to assist as I can to further promote usage of the project.

I hope this can be a useful project either for internal team collaboration or simply as reference code for other users. The code is published with the permissible Apache 2.0 license (same as Apache and MongoDB that it builds off).

Notes:

Source code is here: https://github.com/JoeMrCoffee/OurNoteOrganizer

A word on TinyMCE

TinyMCE is an external text editor which is used to help enhance the ease for writing and editing posts. It is an external tool that requires connectivity to external networks in order to function. For environments that do not have external Internet connectivity a standard 'textarea' without rich formatting is employed.

As this project is made to be hosted on any on-prem environment, there is no TinyMCE API key provided or registered. Users can create their own keys based on their domains and needs. To remove the notification about getting started, users can follow the quick steps, create their own API key, and add it to line 8 of the newpost.php file.

More information on TinyMCE and getting started:

https://www.tiny.cloud/

https://www.tiny.cloud/docs/quick-start/

User login and logout using PHP - Part 3 of 3 (still maybe 4)

 

This post and video runs through how to create some logic for searching through a user table in a database, validating the given login credentials, and displaying different results based on the outcome. 

Key concepts covered are the session_start() function of PHP, essentially allowing for the webpage to store data (cookies) about a user, using a counter to help check the login, and then session_destroy() function to logout. 

This bit of code was actually something I thought up, but previous references helped walk me through it. JoyofPHP by Alan Forbes again briefly talks about how, conceptually, to handle some of this, and there are slews of examples on sites like StackOverflow, and W3schools for dealing with sessions and variables.

The bit of javascript code to automatically refresh the page on first load I found from this StackOverflow post. The site is a wealth of knowledge with contributors from all over the world helping to solve each others coding roadblocks. Something anyone who even wants to just start to learn will find useful, and Google results often reference it.

Note: Mentioned in the first post, this tutorial doesn't include a security portion, but should one be considering a live website including SSL/TLS will be critical before doing anything like a user login with sensitive information. At the very least purchase a valid certificate, create your own if its an internal site/system, or run Let's Encrypt on the site.

I hope all of this will be helpful, and provide a good starting place for future development and learning.

A quick JS interlude

 

This video is a quick - very quick by my standards - video on a short script and interacting with a website to provide real-time updates to users. The script essentially just pulls in variables and outputs the product (multiplying price * amount) so that a user's total order price changes as they select a different amount. 

Most of what I know of JavaScript - which is honestly not a lot - is from the excellent tutorials at W3schools. I've not spent as much time with other elements of how JavaScript interacts with databases and helps create more dynamic websites, but I am still learning as I go. 

A couple more sites and references which would be good for future reading and understanding are below. Several are beyond what I've spent time with having focused mostly on PHP and Linux the past couple of years, but I know that they are powerful tools and hope the references can give those interested some more direction for future areas to study to improve their web development skills.

Angular - Typescript- and JavaScript-based (AngularJS) web development platform, led by Google Angular team.

JQuery - more advanced functionality using the JavaScript framework, also includes some potential for DB interaction, though less a focus than PHP/mysqli.

w3schools Web Development Roadmap - a great overview for all the various building blocks that go into web development. 

There are a ton of things that go into building a strong website. This is exactly why so many business chose to pay to have things hosted on Amazon or setup a site with Shopify or Wix. I personally don't like default templates and structure for any site I want to create as often the templates are extremely complex or only partially editable at the HTML/JavaScript/PHP level. That said, things like security - SSL/TLS encryption, secure payment methods, and servers for hosting, and a good CDN for helping copy and deliver content the world-round are costly. Most platforms designed to host a site for you take care of a lot of that back end and any creator would need to weigh said costs with the flexibility of developing a site completely from scratch. 

Hopefully these tutorials can help those looking to just gain a basic understanding of what goes into web design.

PHP + CSS + HTML overview - Post 2 of 3 (maybe 4)

This post goes over how to take the functions of the 'mysqli' function we covered in the previous PizzaOrder site, and create a more usable flow in a nicer format. The new site adds an order confirmation page and website management pages for internal users to add products and review new orders.

User login and control is coming in a separate video.

While this particular code is largely my own, I also wanted to link back again to the JoyofPHP, and also help signal out W3schools website which has a ton of info on managing and creating feature websites. Their site is linked on the right-hand side column in the blog as well, but it is a great source of know-how for getting started with website creation/optimization.

One other note to add is the W3schools' explanations of the enctype for uploading a file to PHP - Note https://www.w3schools.com/tags/att_form_enctype.asp

I hope this is helpful, thanks again.

Intro to Web design using HTML, CSS and PHP - 1 of 3

This tutorial covers the basics of using HTML and PHP to interact with a user, collect data into an HTML form, capture the data, then submit to an existing database. 

Primarily we cover HTML <form></form>, PHP mysqli, PHP echo, and the basic formatting of an HTML table. 

I designed this to be very simple on purpose to act as a base. In the next two or three videos I hope to explore more about formatting and creating a more useful flow of user data and a shopping cart to open orders. In many ways these fields are just building on what is already shown in this video, but help to demonstrate how powerful the mysqli integration is with HTML, CSS, and PHP for create dynamic websites. 

Of course there are a multitude of other features and optimizations that can be done and included. I hope this can be a good foundation for new users or those interested to take the first steps - like I am - into web and software design.

I also wanted to reference The Joy of PHP by Alan Forbes again as his book taught me what little I know of PHP. The examples I'm showing are just pieces of code and know-how that his more in-depth book details, and I found it really helpful and easy to apply.

Finally, I can't emphasize enough, the current site is NOT secure. We built our LAMP stacks without an SSL (Secure Sockets Layer) certificate so that would need to be added to the Apache server/service on a server facing the internet. More information can be found on various sites, and currently one of the best open SSL implantation is Let's Encrypt. It does require some access to the Apache server to setup, but automates the SSL certificate re-registration/authentication so is quite nice for most sites. As an admin it will be up to your team to pick the best solution, but I wanted to ensure that while previous LAMP stacks are both viable test environments, a production environment (hosting a site on the Internet) shoudl have both SSL certicates and strong Firewall protection.