DEV Community: Iqbal Syahrul Siddiq

What you can do when a project is stuck ?

Iqbal Syahrul Siddiq — Wed, 20 Sep 2023 14:33:12 +0000

We’ve all seen projects that are stuck at a particular stage, failing to progress or move forward. Maybe the team can't seem to get decisions, has 'paralysis by analysis' of options, the business case can't get past gateways, or there are unresolved issues between stakeholders or teams holding up critical delivery actions.

The initiative might be a fabulous idea conceptually, but you just don't seem to be able to get traction to move it along.

Therefore, a stuck project is like a “Nightmare” for any Project Manager and the Organization. If you are feeling “stuck” on a project and are having a hard time figuring out your next step, try the solutions listed below:

Take a break. Sometimes the best way to get unstuck is to simply step away from the project for a while. Go for a walk, listen to music, or do something else that you enjoy. When you come back to the project, you may be able to approach it with fresh eyes.
Break the project down into smaller tasks. If the project is overwhelming, try breaking it down into smaller, more manageable tasks. This will make it seem less daunting and help you to make progress.
Talk to someone. If you're still stuck, talking to someone else can be helpful. This could be a colleague, manager, friend, or family member. Sometimes just talking about the problem can help you to see it from a different perspective and come up with a solution.
Do some research. If you're stuck on a particular aspect of the project, try doing some research to see if you can find a solution. There are many resources available online and in libraries.
Ask for help. If you've tried all of the above and you're still stuck, don't be afraid to ask for help. This could be from a colleague, manager, or someone else with expertise in the area you're working on.

Believe in yourself, everything is gonna be fine

Waterfall vs Agile, Which is best methodologies for Software Project Management ?

Iqbal Syahrul Siddiq — Sat, 16 Sep 2023 03:56:25 +0000

A methodology is a set of principles, practices, and techniques that are used to achieve a specific goal. Methodologies can be used in a variety of fields, including business, science, and education.

In project management, methodologies are used to plan, execute, and control projects. There are many different methodologies that can be used, each with its own strengths and weaknesses. Some of the most common methodologies include:

Waterfall

Waterfall methodology is a linear approach to project management. Each phase of the project must be completed before the next phase can begin. The waterfall methodology is often used for large and complex projects, such as building a new bridge or developing a new software system.

The waterfall methodology consists of the following phases:

Requirements gathering: The project team identifies the needs of the project stakeholders and documents the requirements of the project.
Design: The project team designs the solution to meet the project requirements.
Implementation: The project team develops and builds the solution.
Testing: The project team tests the solution to ensure that it meets the project requirements.
Deployment: The project team deploys the solution to production.

The waterfall methodology has a number of advantages, including:

It is a structured approach to project management.
It is easy to follow and understand.
It is well-suited for large and complex projects.
It provides a clear roadmap for the project team to follow

However, the waterfall methodology also has a number of disadvantages, including:

It is not flexible. Changes to the project requirements can be difficult and expensive to implement.
It can be slow and time-consuming. It can take a long time to complete each phase of the project before moving on to the next phase.
It can lead to rework. If the project team discovers errors in the design or implementation of the solution, they may have to go back and rework earlier phases of the project.

Overall, the waterfall methodology is a good choice for large and complex projects where there is a need for a structured and well-defined approach. However, it is important to be aware of the disadvantages of the waterfall methodology before using it.

Here are some tips for using the waterfall methodology effectively:

Start with a clear and well-defined set of requirements. This will help to ensure that the project team is working towards the same goals.
Use a detailed project plan. The project plan should document the tasks that need to be completed, the resources that are needed, and the timeline for completing each task.
Communicate regularly with the project stakeholders. This will help to keep the stakeholders informed of the project's progress and to get their feedback.
Be flexible. Changes to the project requirements are inevitable. Be prepared to adapt the project plan accordingly.

Agile

Agile methodologies are iterative approaches to project management. The project is broken down into small increments, and each increment is developed and delivered to the customer for feedback. Agile methodologies are often used for smaller and more complex projects, such as developing new software products or websites.

There are many different agile methodologies, but they all share some common characteristics. These characteristics include:

Emphasis on collaboration: Agile methodologies emphasize collaboration between the project team and the customer. This collaboration helps to ensure that the project meets the customer's needs.
Flexibility: Agile methodologies are flexible and adaptable. This allows the project team to respond to changes in the customer's needs or to unexpected challenges.
Iteration: Agile methodologies use iterations to develop and deliver the project. This allows the project team to get feedback from the customer early and often, and to make necessary changes.

Some of the most popular agile methodologies include:

Scrum: Scrum is a lightweight agile methodology that is often used for software development projects. Scrum teams work in short cycles called sprints, and each sprint produces a working product increment.
Kanban: Kanban is a visual agile methodology that is often used for continuous improvement projects. Kanban boards are used to track the progress of work items, and the team focuses on delivering work items as quickly as possible.
Extreme Programming (XP): XP is an agile methodology that focuses on simplicity, communication, feedback, courage, and respect. XP teams use short iterations, pair programming, and continuous integration to deliver high-quality software.

Agile methodologies have a number of advantages, including:

They are flexible and adaptable. This allows the project team to respond to changes in the customer's needs or to unexpected challenges.
They produce working software early and often. This allows the customer to get feedback on the product and to make necessary changes early in the development process.
They promote collaboration between the project team and the customer. This helps to ensure that the project meets the customer's needs.

However, agile methodologies also have some disadvantages, including:

They can be complex to implement. Agile methodologies require a high level of collaboration and communication between the project team and the customer.
They can be difficult to manage. Agile methodologies require a lot of discipline and self-management from the project team.
They can lead to rework. If the project team discovers errors in the product early on, they may have to go back and rework earlier iterations.

Overall, agile methodologies are a good choice for smaller and more complex projects where there is a need for flexibility and adaptability. However, it is important to be aware of the disadvantages of agile methodologies before using them.

Here are some tips for using agile methodologies effectively:

Start with a clear and well-defined set of goals. This will help to ensure that the project team is working towards the same goals.
Communicate regularly with the customer. This will help to keep the customer informed of the project's progress and to get their feedback.
Be flexible and adaptable. Changes to the customer's needs or to the project plan are inevitable. Be prepared to adapt accordingly.
Use a variety of agile tools and techniques. There are many different agile tools and techniques available. Use the tools and techniques that work best for your team and your project.

Waterfall vs Agile

The triple constraints is a project management concept that states that there are three constraints that must be balanced in order to successfully complete a project: time, cost, and scope.

Time: The amount of time available to complete the project.
Cost: The amount of money available to spend on the project.
Scope: The features and functionality of the project's deliverables.

In the waterfall method, the triple constraints are typically managed by carefully planning and documenting the project at the beginning of the project. The project plan should specify the time, cost, and scope of the project, and it should be used to track progress and make adjustments as needed.

In the agile method, the triple constraints are typically managed by iterative development and continuous feedback. The project is broken down into small, manageable increments, and each increment is developed and delivered to the customer for feedback. This allows the team to adjust the scope of the project as needed, and it also helps to ensure that the project stays on time and within budget.

The triple constraints are a fundamental concept in project management, and they are important to consider regardless of the project management methodology that is being used. By carefully managing the triple constraints, project managers can increase the chances of successfully completing their projects.

Here are some additional things to consider when applying the triple constraints to waterfall and agile projects:

Waterfall projects: In waterfall projects, the triple constraints are typically managed by carefully planning and documenting the project at the beginning of the project. The project plan should specify the time, cost, and scope of the project, and it should be used to track progress and make adjustments as needed. However, it is important to be flexible in waterfall projects, as changes are inevitable.
Agile projects: In agile projects, the triple constraints are typically managed by iterative development and continuous feedback. The project is broken down into small, manageable increments, and each increment is developed and delivered to the customer for feedback. This allows the team to adjust the scope of the project as needed, and it also helps to ensure that the project stays on time and within budget. However, it is important to be mindful of the overall scope of the project, as too many changes can make it difficult to deliver the final product.

Conclusion

Ultimately, the best way to apply the triple constraints to a project will depend on the specific project and the team's preferences. However, by understanding the triple constraints and how they can be managed, project managers can increase the chances of successfully completing their projects.

How to make QR Scanner using Laravel & Javascript

Iqbal Syahrul Siddiq — Mon, 28 Aug 2023 08:45:27 +0000

A QR Scanner is a device or software that can read and decode QR codes. QR codes are two-dimensional barcodes that can store a variety of information, such as text, URLs, contact information, and more.

QR code scanners can be used to scan QR codes in a variety of ways. For example, they can be used to:

Open a website in a web browser
Add a contact to a phone book
Pay for goods or services
Access loyalty programs
Log in to websites or applications
Share files

QR code scanners are available in a variety of forms, including:

Mobile phone apps
Point-of-sale (POS) devices
Wearable devices
Industrial scanners

QR code scanners are a convenient and efficient way to access information and perform tasks. They are becoming increasingly popular as QR codes become more widely used.

Here are some of the benefits of using a QR code scanner:

Convenient: QR code scanners can be used to scan QR codes quickly and easily.
Efficient: QR code scanners can save time and effort by eliminating the need to manually enter information.
Secure: QR codes can be encrypted to protect the information they contain.
Flexible: QR codes can be used to store a variety of information, making them versatile and adaptable.

If you are looking for a convenient and efficient way to access information and perform tasks, a QR code scanner is a good option to consider.

In this tutorial i will show you how to make QR Scanner web based using Laravel & Javascript, it's easy and simple. We will using Javascript code from JSQRScanner Github (https://github.com/jbialobr/JsQRScanner), and combine with Laravel.

Install new laravel project (in this tutorial we will using Laravel version 8)

composer create-project laravel/laravel:^8.0 example-app

Download all javascript files from https://github.com/jbialobr/JsQRScanner (Actually we don't need all folder, we just using JsQRScanner/docs/* . Copy all javascript folder in public folder

Open resources/views/welcome.blade.php, and modify code like bellow

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel QR Scan Using Webcam</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <!-- This script loads your compiled module.   -->
        <script type="text/javascript" src="{{ url('JS_Plugin/docs/jsPretty/jsqrscanner.nocache.js') }}"></script>

        <!-- Styles -->
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <script> 
    if (location.protocol != 'https:') { 
      document.getElementById('secure-connection-message').style='display: block';
      }
      </script>  
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
                <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
                    <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
                        <g clip-path="url(#clip0)" fill="#EF3B2D">
                            <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
                        </g>
                    </svg>
                </div>

                <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
                    <div class="grid grid-cols-1 md:grid-cols-2">
                        <div id="scanner" class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">

                        </div>
                        <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
                            <div class="flex items-center">
                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="" class="underline text-gray-900 dark:text-white">Laravel QR Scanner Using Webcam</a></div>
                            </div>

                            <div class="ml-12">
                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                                    A QR code scanner is a device or software that can read and decode QR codes. QR codes are two-dimensional barcodes that can store a variety of information, such as text, URLs, contact information, and more.
                                </div>
                            </div>
                            <div class="ml-12">
                                <textarea id="scannedTextMemo" cols="50" class="mt-2 form-control" rows="2" readonly></textarea>
                            </div>
                            <div class="ml-12">
                                <textarea id="scannedTextMemoHist" class="mt-2 form-control" value="" cols="50" rows="10" readonly></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
                    <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
                        Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
                    </div>
                </div>
            </div>
        </div>

<script type="text/javascript">
    function onQRCodeScanned(scannedText)
    {
        var scannedTextMemo = document.getElementById("scannedTextMemo");
        if(scannedTextMemo)
        {
            scannedTextMemo.value = scannedText;
        }
        var scannedTextMemoHist = document.getElementById("scannedTextMemoHist");
        if(scannedTextMemoHist)
        {
            scannedTextMemoHist.value = scannedTextMemoHist.value + '\n' + scannedText;
        }
    }

    function provideVideo()
    {
        var n = navigator;

        if (n.mediaDevices && n.mediaDevices.getUserMedia)
        {
          return n.mediaDevices.getUserMedia({
            video: {
              facingMode: "environment"
            },
            audio: false
          });
        } 

        return Promise.reject('Your browser does not support getUserMedia');
    }

    function provideVideoQQ()
    {
        return navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
            var exCameras = [];
            devices.forEach(function(device) {
            if (device.kind === 'videoinput') {
              exCameras.push(device.deviceId)
            }
         });

            return Promise.resolve(exCameras);
        }).then(function(ids){
            if(ids.length === 0)
            {
              return Promise.reject('Could not find a webcam');
            }

            return navigator.mediaDevices.getUserMedia({
                video: {
                  'optional': [{
                    'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
                    }]
                }
            });        
        });                
    }

    //this function will be called when JsQRScanner is ready to use
    function JsQRScannerReady()
    {
        //create a new scanner passing to it a callback function that will be invoked when
        //the scanner succesfully scan a QR code
        var jbScanner = new JsQRScanner(onQRCodeScanned);
        //var jbScanner = new JsQRScanner(onQRCodeScanned, provideVideo);
        //reduce the size of analyzed image to increase performance on mobile devices
        jbScanner.setSnapImageMaxSize(300);
        var scannerParentElement = document.getElementById("scanner");
        if(scannerParentElement)
        {
            //append the jbScanner to an existing DOM element
            jbScanner.appendTo(scannerParentElement);
        }        
    }
  </script>   
    </body>
</html>

Test & run laravel project & and try open http://localhost:8000/ in your browser

php artisan serve

If you need full example code, please clone from this link : https://gitlab.com/open-for-public/laravel-qr-scanner-using-webcam.git

Detect Bugs & Vulnerabilities and get instant feedback. Lumen - Sonarcloud Integration

Iqbal Syahrul Siddiq — Fri, 25 Aug 2023 07:21:41 +0000

What is Sonarcloud ?

SonarCloud is a cloud-based code analysis service designed to detect coding issues in 26 different programming languages. By integrating directly with your CI pipeline or one of our supported DevOps platforms, your code is checked against an extensive set of rules that cover many attributes of code, such as maintainability, reliability, and security issues on each merge/pull request. As a core element of our Sonar solution, SonarCloud completes the analysis loop to help you deliver clean code that meets high-quality standards.

SonarCloud uses state-of-the-art techniques in static code analysis to find problems and potential problems in the code that you and your team write. Static analysis is called static because it does not rely on actually running the code. As a result, SonarCloud offers an additional layer of verification, different from automated testing and manual code review. Its powerful set of language-specific analyzers uses thousands of rules to track down hard-to-find bugs and quality issues - from simple coding mistakes, and tricky bugs, to advanced issues and security vulnerabilities such as injection flaws. Early detection of problems during static analysis ensures that fewer issues get through to the later stages of the process and ultimately helps to increase the overall quality of your production code.

As a core element of our Sonar solution, SonarCloud integrates into your existing workflow and detects issues in your code to help you perform continuous code inspections of your projects. It achieves this by integrating into your CI pipeline or DevOps platform thus, extending your DevOps experience by importing your projects and performing automated code checks within minutes. SonarCloud works with:

Github
Bitbucket Cloud
Azure DevOps
Gitlab

SonarCloud does not work with on-premises code repositories. For on-premise support.

In this tutorial, i would like to tell you how to integrated Sonarcloud. Make simple dev-cylce (Laravel, Gitlab, and Sonarcloud)

Create Workspace / Project Group in Gitlab

Open and sign in to your Gitlab account https://gitlab.com/users/sign_in

On the sidebar, click "Group"

Click "New Group" button (if you want to make new project group)

Click "Create Group"

Fill out the form, choose your permission access for your workspace (public / private), in this tutorial i will choose "public", and submit "Create Group"
Sonarcloud need personal access token from your Gitlab account. So, you have to generate your token, open your account setting menu, or click on this link : https://gitlab.com/-/profile/personal_acc
Click "add new token"

You have to fill token name , expiration date& checked api option
Click "create personal access token button
Copy, yor personal access token to some notes (important : you only can copy token in first time after token generated, make sure you saved it)

Register Sonarcloud Account

Open your browser, and visit this link : https://www.sonarsource.com/products/sonarcloud/

Click on "Sign Up" button

You can choose account that's you want to integrated, in this tutorial i will using gitlab account , click on gitlab button

Next, please click on authorize (Sonarcloud require access to Gitlab repository)

If it's your first time using Sonarcloud, you will see this blank page. It's mean nothing project exist in your account

Let's continue

Setup Sonarcloud

Next, you have to setup sonarcloud, from the blank page, click on button analyze new project

Click Import a new Organization

Next, in this tutorial i want to integrated Sonarcloud with some my personal workspace / project group in Gitlab, so, click in Import any Gitlab group (if you choose for import private gitlab you have to paid to Sonarcloud / nothing free package)

Copy and paste your personal access token
Copy and paste your group id as group key value (you can fund group id on group setting (Group -> select your group -> setting -> general)

Click "Continue"
Next, scroll down page, and you have to choose a plan (in this tutorial i will try free version)

Click "create organization"
Great, your sonarcloud setup is done, next let's back to Gitlab repository

Create a new project in workspace / group Gitlab (for testing)

Open your gitlab group, and create new project

In this tutorial, i will upload my mini project using Lumen (Laravel Microframework) to gitlab group project *actually you can using another framework, setup process is same.
Click create blank project

Fill the form, and click create project (if you want to use free version sonarcloud, please choose "public access" on your project)

Registered project into Sonarcloud

Click on analyze a new project button

Sonarcloud will check and listed your public project in workspace

Select the project, and click setup

Choose previous version or number of days (it's based on your preferences, you can change anytime). In this tutorial, i will choose previous version

Click create project
Choose With Gilab CI/CD pipeline for analysis method

You have to add some Sonarcloud credential (token variable and URL) to your Gitlab repository, please follow instructions

Add credential

Next, you have to add a new file .yml (.gitlab-ci.yml) to your project folder root. Choose your programming languages, make sure it's match (In this tutorial i using Lumen, so i choose PHP version)

variables:
  SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
  GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
sonarcloud-check:
  image:
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]
  cache:
    key: "${CI_JOB_NAME}"
    paths:
      - .sonar/cache
  script:
    - sonar-scanner
  only:
    - merge_requests
    - main
    - develop

In the last line of code, you have to make sure branch names repository is correct, as default Sonarcloud named main branch as "master", but in gitlab, main branch named as "main", so you have to change "master" to "main"

You can add the branch name when the Sonarcloud will analysis your code.

In the last step of instructions, you have to create a new file (sonar-project.properties)

sonar.projectKey=open-for-public_lumen-restfull-api-with-jwt-authentication
sonar.organization=open-for-public

# This is the name and version displayed in the SonarCloud UI.
#sonar.projectName=Lumen Restfull API With JWT Authentication
#sonar.projectVersion=1.0


# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
#sonar.sources=.

# Encoding of the source code. Default is default system encoding
#sonar.sourceEncoding=UTF-8

You're Done

Testing

Push your code using git command
Open my project menu in Sonarcloud sites

After push process finish, refresh my project page in Sonarcloud (it'usually takes 1 - 3 minute of analysis process, depend on line of number line of code.)
If analysis finish, the result will show in page

Great, you're done, i hope this article help you. See you on the next post

Lumen Tutorial : How to build a JWT Authenticated API with Lumen

Iqbal Syahrul Siddiq — Sun, 20 Aug 2023 16:22:45 +0000

A JSON web token(JWT) is JSON Object which is used to securely transfer information over the web(between two parties). It can be used for an authentication system and can also be used for information exchange.

The token is mainly composed of header, payload, signature. These three parts are separated by dots(.). JWT defines the structure of information we are sending from one party to the another, and it comes in two forms – Serialized, Deserialized.

The Serialized approach is mainly used to transfer the data through the network with each request and response. While the deserialized approach is used to read and write data to the web token.

In this tutorial, i would like to show you how to build a JWT Authenticated API with Lumen 8.

Let's code !!

Install Lumen

First step, you have to install new lumen project. If you want to use latest version of lumen, you can run command below :

composer create-project --prefer-dist laravel/lumen blog

but, if you want to using specific version of lumen, you can run command below

composer create-project laravel/lumen blog "5.*.*"

you just have to change main version number (5, 6, 7, 8, etc)

Make Migration for Database

Make sure, your env file connected to some database address

DB_CONNECTION=mysql
DB_HOST=type-your-host-here
DB_PORT=3306
DB_DATABASE=type-your-db-here
DB_USERNAME=type-your-username
DB_PASSWORD=type-your-password

Create a new migration file, run this command

php artisan make:migration create_users_table

Open migration file, and add code below

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Run the migration

php artisan migrate

This command, will execute migration file and create new tables in your database.

Install JWT Package

install jwt-auth via composer

composer require tymon/jwt-auth:*

Generate JWT Secret Key

Generate key secret JWT, run command below

php artisan jwt:secret

Setup Folder & Important Config File

Create new folder, named it config (same level with app folder)
You have to copy file from vendor/tymon/jwt-auth/config/config.php to config folder, and rename file to jwt.php
Next, make new file inside config folder, auth.php

Open file app.php (bootstrap/app.php), edit and add this code

// Uncomment this line
$app->withFacades();
$app->withEloquent();

// Add this line
$app->configure('jwt');
$app->configure('auth');

//Then uncomment the auth middleware 
$app->routeMiddleware([
    'auth' => App\Http\Middleware\Authenticate::class,
]);

$app->register(App\Providers\AuthServiceProvider::class);

// Add this line in the same file:
$app->register(Tymon\JWTAuth\Providers\LumenServiceProvider::class);

Open auth.php (config/auth.php) add this code

<?php

return [
    'defaults' => [
        'guard' => 'api',
        'passwords' => 'users',
    ],

    'guards' => [
        'api' => [
            'driver' => 'jwt',
            'provider' => 'users',
        ],
    ],

    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => \App\Models\User::class
        ]
    ]
];

Create Model

Let's make new file model, User.php (app/models/user.php), add code below :

<?php

namespace App\Models;

use Illuminate\Auth\Authenticatable;
use Laravel\Lumen\Auth\Authorizable;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Contracts\Auth\Authenticatable as AuthenticatableContract;
use Illuminate\Contracts\Auth\Access\Authorizable as AuthorizableContract;

//this is new
use Tymon\JWTAuth\Contracts\JWTSubject;

class User extends Model implements AuthenticatableContract, AuthorizableContract, JWTSubject 
{
    use Authenticatable, Authorizable;

    /**
     * Get the identifier that will be stored in the subject claim of the JWT.
     *
     * @return mixed
     */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

    /**
     * Return a key value array, containing any custom claims to be added to the JWT.
     *
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }
}

Create Controller

Next, you have to make new controller file, AuthController (app/http/controllers/AuthController), add thic code :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\User;

class AuthController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth:api', ['except' => ['login', 'refresh', 'logout']]);
    }
    /**
     * Get a JWT via given credentials.
     *
     * @param  Request  $request
     * @return Response
     */
    public function login(Request $request)
    {

        $this->validate($request, [
            'email' => 'required|string',
            'password' => 'required|string',
        ]);

        $credentials = $request->only(['email', 'password']);

        if (! $token = Auth::attempt($credentials)) {
            return response()->json(['message' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

     /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    {
        return response()->json(auth()->user());
    }

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    {
        auth()->logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
     * Refresh a token.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    {
        return $this->respondWithToken(auth()->refresh());
    }

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'user' => auth()->user(),
            'expires_in' => auth()->factory()->getTTL() * 60 * 24
        ]);
    }
}

Setup Route

Open web.php file (routes/web.php), add this code

<?php

/** @var \Laravel\Lumen\Routing\Router $router */

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It is a breeze. Simply tell Lumen the URIs it should respond to
| and give it the Closure to call when that URI is requested.
|
*/

$router->get('/', function () use ($router) {
    return $router->app->version();
});

$router->get('/get-key', function() {
    return \Illuminate\Support\Str::random(32);
});

Route::group([

    'prefix' => 'api'

], function ($router) {
    Route::post('login', 'AuthController@login');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('user-profile', 'AuthController@me');

});

Add Encryption key Application

You can't run php artisan key:generate in lumen (like in Laravel), so you have to generate manually by call route /get-key

Open browser, visit this link http://localhost:8000/get-key , copy and paste the key to APP_KEY in env file

Refresh ENV Setup

After you change env file, you have to run

php artisan cache:clear

Running Lumen

Run lumen with this command

php -S localhost:8000 -t public

Open Postman to test your API endpoint's

_You can clone example code by this link : _ https://gitlab.com/open-for-public/lumen-restfull-api-with-jwt-authentication.git