Build a full stack web application in 15 minutes with Laravel + Vue.js + AdminLTE Admin Panel
Introduction
Pyronome is an online platform that allows software developers to develop sustainable and scalable software solutions quickly. Pyronome provides easy-to-use interfaces that make it possible to define software elements. Then these definitions can be transformed into source code in programming languages such as Java, C#, PHP, and others. Pyronome saves time in software production processes by converting frequently used source code snippets into reusable components. In addition to this, it separates software research and development processes with its reusable components approach. It helps to increase the quality of software production processes by enabling the digitization of experience.
This article is referencing the following tutorial video published on the Pyronome Youtube channel:
Table of contents
- Step 0: Before you begin
- Step 1: Creating the project
- Step 2: Determining the target technology
- Step 3: Defining the model
- Step 4: Generating the source code
- Conclusion
Step 0: Before you begin
The first step in getting started with the Pyronome Platform is to become a member. Click here to access the member registration form. If you have a Pyronome account, you can log in.
As a demonstrative example, this guide explains the initial steps of implementing a Laravel + Vue.js + AdminLTE web application with a line chart based on dates called a “History Chart” (Figure 1–5).
When you complete this guide, you will learn to build a full-stack web application and generate AdminLTE 3.x, Laravel 6.x, and Vue.Js 2.x source code for a web application project by using Pyronome Platform.
Step 1: Creating the project
After your first login, the platform redirects you to the new project page. You can create your first project by following these steps:
1. Enter your project name as “history-chart-demo” in the “Name” field.
2. In your project’s “Title” field, enter “History Chart Demo” as a title to differentiate your project from other projects.
3. Then press the “Create Project” button. If no errors occur, your project is created, and on the “Projects” page, your newly created project appears.
4. Click on the title of your project to view the details of your new project.
Step 2: Determining the target technology
Patterns are the components that shape the model structure of the project and the content of the project source code to be generated. You can select more than one pattern for a project.
Note: Patterns are divided into logical levels (e.g., backend, frontend, and application templates) to ensure technology independence, updating ease, and diversity of frameworks and libraries. You can generate ready-to-use applications according to your needs by using a pattern or patterns.
1. If no pattern is selected for the project, the pattern install page is automatically displayed when you open the project page.
2. On the pattern install window, you can select the patterns according to the technologies you intend to use for your project. You can use the filters on the left to find the patterns. I prefer using Laravel, Vue.js technologies, and AdminLTE as the admin panel in this project. I am typing “AdminLTE” in the search field and installing AdminLTE 3.x + Vue.js 2.x + Laravel 6.x, available in the list after the search.
3. For free patterns, the “Install” button appears on the right of each line of the pattern. The “Buy” button occurs for the paid templates. Click the “Install” button to include the pattern in your project. You can click on the “More Info…” link for more information about the patterns. You can find more information about this web application development kit on the Pyronome Marketplace.
4. If there are other patterns you want to add, you can add these patterns following the same steps.
5. Once you have added all the patterns you need, you can start building the project model by pressing the “Model” button at the bottom of the pattern install window.
Note: The project model could vary according to the selected patterns.
Step 3: Defining the model
Once you have included the AdminLTE 3.x + Vue.js 2.x + Laravel 6.x as a pattern in your project, you should model the project before moving on to the source code generation step. In some cases, you can skip this step because the selected patterns may also contain a default project model.
When you open the project “Model” page, you can view a form that allows you to create the project model easily. As mentioned before, the project model may vary according to the selected patterns. You can learn how to create the project model from the pages of the selected patterns on the Pyronome Marketplace.
For our sample project, two models are required to create a history chart and display the points listed on this history chart:
- A model for Chart List where recorded History Charts are stored,
- another model where the data points on the charts are kept.
Please follow the following steps to create the project model:
1. Click Model List Element to add the first model.
2. Enter the first model’s name as “HistoryChart” concatenated in the “Name” field and “History Chart” in the “Title” field.
3. Try to predict what properties are available in models and add them by clicking the “Property List”. Later, you can add new properties and modify existing properties.
3.1. Define the name of the property as “title” in the “Name” field and “Title” in the “Title” field under the property list of model HistoryChart and set the property type as “ShortText”.
3.2. Add another boolean property called “Enabled” that can be either “true” or “false” to control the visibility of HistoryChart instances. This property will help us implement the show/hide feature of the charts on the home page. To do this, define Property Type as “Checkbox”, give name as “enabled”, and Title as “Enabled”.
3.3. As a final property, add a description property. Define the property’s name as “description” and make its property type “Long Text”.
3.4. You can change the order of the properties you created by dragging them. Let’s drag and drop the “Enabled” property to the top of the property list in the first model.
3.5. You created the first model; you can continue to the second model that you decided to create.
Note: Write the model names in the camel case; the first letter of each word is uppercase, and fill the property names in all lowercase characters. You can write it any way you want but must ensure that spaces, punctuation characters, and using a number as a first character are not allowed. The existing rules of the target programming language may be preferred so that you will not have any problems when you translate your application model into this particular programming language.
4. Create another model where all the points on the chart are stored by following the same steps. Enter the name of the model as “HistoryChartPoint” concatenated in the “Name” field and “History Chart Point” in the “Title” field.
4.1. Add a property as a variable that specifies whether the point is featured or not. If “true” is selected, the point’s name will be displayed above the related point; if not, only the point is viewed. To do this, define Property Type as “Checkbox”, give name as “featured”, and Title as “Featured”.
4.2. Add another property that represents the point names. Its property type is “Short Text”. Give property name as “point_title” and Title as “Point Title”.
4.3. Add one more property that represents the dates of the points listed. Its property type is “DateTime”. Give property Name as “point_date” and Title as “Point Date”.
4.4. Add a final property to create a field where you can enter the values of the points in the list. Set the Property Type as “Number” and give its Name as “point_value” and Title as “Point Value”.
4.5. I need to specify which specific points are connected to a history chart. To do this, add a new property and choose “ClassSelection” among the available options of the Property Type. When you define it as ClassSelection, you can select any class in your current model. Give “history_chart” to the property name and “History Chart” as its Title. And as you can guess, this variable creates foreign keys in the database and establish the relationship between HistoryChart and HistoryChartPoint tables.
4.6. After choosing the “ClassSelection”, a new property section called “Selection Properties” has appeared. Under the “Selection Properties” section, define “HistoryChart” as Property Model. Enter its “title” as Property Model Display Template to show it with its title. Multiple Selection is false to be able to choose a single HistoryChart record.
4.7. Enter the Model Property Filter as (deleted==false). Expression for this property is used to show the undeleted ones. Here JavaScript-like filter expressions can be entered to select available records. Alternatively, it can be also specified as, for example as (deleted==false) && (enabled==true).
5. Now HistoryChart and HistoryChartPoint models were defined. After defining the models, click the “Commit Changes” and save your project model.
Before proceeding to the next step, the code generation phase, please check if the selected pattern is AdminLTE 3.x + Vue.js 2.x + Laravel 6.x, as you specified previously. After this step, you can proceed to the source code generation phase.
Step 4: Generating the source code
Once you have created your project, chosen the patterns, and finally created your project model, you can proceed to the source code generation phase.
Note: Source code generation time may vary depending on the number of patterns selected, pattern content (templates, static files), and the size of the project model. The average source code generation time for medium-sized projects is approximately 2–3mins.
You can follow the steps below to generate the project’s source code:
1. Click the “Source Code” menu on the left; Open the source code page.
2. When you make an update in the project patterns or model, the source code generation immediately starts after you open the source code page. To start the source code generation process manually, you can press the “Generate Now!” button at the top right of the page.
3. The page reloads back some time after the source code generation starts. The source code generation process can continue in the background.
4. The “Generating…” flashes at the top right of the page while the source code is generating. After the source code generation process is completed, the notification on the right top side is updated to “Generated”.
5. After the source code generation process finishes, the source code files -created according to the selected patterns- are listed in the middle section of the page. Clicking on the text-based files in the list displays the contents of the files. Clicking on the directories in the list sorts the directory contents.
6. To download generated source code in a single .zip file, you can press the “Download (.zip)” button at the top right.
Note: If you have created “Repositories” for your project, the source code files are pushed/uploaded automatically to the repositories immediately after the source code generation process.
You can also check the folders and files under the “Source Code” section on the left side menu (Figure 6).
If you enter the “source” directory, you can see that the directory structure is the same as the Laravel framework directory structure (Figure 7).
You can also check the “app” folder that the platform has generated necessary files and handy AdminLTE classes that can be used in the development process (Figure 8).
The platform also has generated the models you have created on the model page (Figure 9).
You can see that the model properties are added, and the structure is constructed based on your model definition on the model page. The property values you added, the list of those property values, and the additional class method to be used in the system have been added to this model file as they should be (Figure 10).
Since this is a sample MVC web application, the required controllers and APIs have also been generated (Figure 11,12).
When you check the HistoryChartController class file, you can see that the controller methods have been generated as they should be (Figure 13).
You can also check the Vue.js framework files under the “resources” folder under the “source” folder on the Source Code page (Figure 14).
As you may also notice, this is the Laravel Framework directory scaffolding. Vue.js-related files are placed in a Laravel-specific directory structure to harmoniously use the existing Laravel Mix and other components (Figure 15).
When you enter the “js” folder under the “resources” folder, there is a directory called “adminlte” in it, and within that folder, there are the “routes” files and Vue.js-related files are generated as they should be (Figure 16).
In the “routes-default.js” file, routes are generated. Also (e.g., the AdminLTE routes and the general Vue components), the components specific to your models have been generated. And necessary assignments have also been added to the code. (Figure 17).
The components are generated according to a specific directory structure (Figure 18).
For example, when you enter the “models” directory, you can see that “default” and “custom” directories under the “models” folder are generated (Figure 19).
This structure helps you easily organize files when you want to view a customized version of the current files under the “default” folder (Figure 20).
To achieve this, you copy the content of the detail.vue file and then paste it into the custom folder (Figure 21).
Then you add that definition to the routes-custom.js file under the “adminlte” folder (Figure 22).
The system checks the default and custom route files individually; if the “routes-default.js” has a route in the “route-custom.js”, it uses the “route-custom.js” definition instead, so you can easily show the page you have customized.
When you enter the “models” folder, you can see data entry pages in the edit.vue files under the “historychart” and “historychartpoint” folders (Figure 23).
When you open the “edit.vue” file in the “historychartpoint” default model component folder, you can see that “history_chart” is generated as a select HTML form element as a Vue.js Select2 component (Figure 24).
The platform generated and organized all files and folders based on the requirements of your project model and the target technologies (Figure 25).
Conclusion
This guide describes creating a full-stack web application with AdminLTE 3.x, Laravel 6.x, and Vue.Js 2.x technologies using Pyronome Platform to display a line chart step by step. As an initial step, you have created your project and then defined the patterns. To show a line chart based on dates and make changes to the list of the relevant values on these dates, you created two different models called HistoryChart and HistoryChartPoints, respectively. In the final step, you learned how to generate source code and browse the folders, files, and components auto-generated by the Pyronome Platform.
Visit Pyronome and enjoy the experience
Thanks for reading. You can register for free to try Pyronome right now. For further information, please visit the following links:
Do you have any questions or suggestions? Please let me know in the comments section.
