Phase 1.2: CodeTrek Module

[Ayush8923]

Feature Suggested By @Ayush8923

Parent Issue:- https://github.com/ColoredCow/portal/issues/2704

Related Issue https://github.com/ColoredCow/portal/issues/2734 https://github.com/ColoredCow/portal/issues/2736

Is your feature request related to a problem? Please describe. In ColoredCow, CodeTrek is a journey that most of the interns do. In it, they learn the basics of software development and hone their skills. Now, we want to track and capture this journey of all the interns in Portal. This will help us to monitor the progress of each individual and see where we can or they can do better.

For this, we have introduced Codetrek Module in the previous task. In this task, we will be creating the page that will be used to display the applicant's list and details.

Point of contact for guidance @GauravGusain98

[Ayush8923]

Action Items

Basics - 1 pointer (Skip if you've already done these in your previous tasks)

• [x] Read about Models in Laravel. Share your understanding of why we use them in the task comment in your own language
• [x] Read about Views in Laravel. Share your understanding of why we use them in the task comment in your own language
• [x] Read about Routes in Laravel. Share your understanding of why we use them in the task comment in your own language
• [x] Read about Controller in Laravel. Share your understanding of why we use them in the task comment in your own language
• [x] Read about Services files in Laravel. Share your understanding of why we use them in the task comment in your own language
• [x] Read how we can print a value in Laravel using dd()
• [x] Try printing hello world using the dd function

Frontend Design - 1 pointer

• [x] In the CodeTrek page, Add button for add new applicant as shown in the image below
• [x] Now add 2 tabs applicants and reports as shown below. The selected one should be highlighted. The same is implemented in various places like projects, invoices, recruitment, etc, you can take code references from any of these places
• [x] In case of no result in the applicant tab just show the empty table as shown in the image below
• [x] For the report tab, don't show the table and simply show the text Coming Soon aligned in the center

Bootstrap modal - 1 pointer

• [x] Read about Bootstrap modal from here
• [x] Inside Codtrek module create a file CodeTrek/Resources/views/modals/add-applicant-modal.blade.php for the modal file. Here we will write code related to the modal
• [x] Now include the file inside the codtrek page so that on clicking the button add new applicant button the modal should pop up

Working with forms - 1 pointer

• [x] Read about HTML forms and how we submit forms. Also, share the use of the below provide items
  • [x] Action attribute in the form
  • [x] Method attribute in the form
  • [x] Name attribute in any HTML tag and its importance while form submission
• [x] Inside the Modal create a form that will have input fields as shown in the image below

[nishant22029]

Bootstrap Modal •Bootstap Modal allows users to create modal windows (pop-up windows) on their webpages. •It can be used to display additional information, such as images, forms, videos, and more. •Bootstrap Modal is a JavaScript library that provides an easy way to create responsive and customizable modal windows.

Html forms •HTML forms are used to collect user input. • Forms are created using the

tag and contain various types of input elements such as text fields, radio buttons, checkboxes, and submit buttons.

Actions attribute in forms •The action attribute is used to specify the URL of the page that will process the form data. •It is used to tell the browser where to send the form data when it is submitted.

Methods attribute •The method attribute specifies how to send form-data. •The form-data can be sent by using URL variables with method="get" or HTTP post transaction with method="post". get: •Never use get to send sensitive data as it will be visible in the URL •It is useful for form submissions where a user wants to bookmark the result •get is better for non-secure data, like query strings in Google post: •It appends form-data inside the body of the HTTP request data is not shown in URL •It Has no size limitations •Form submissions with post cannot be bookmarked

[GauravGusain98]

Additional Requirement

• [x] In add new applicant form, also add a text field for capturing phone number. The field label should be Phone

[nishant22029]

ok sir