commit

application/config/routes.php

@@ -7,5 +7,7 @@ $route['default_controller'] = 'home/index2';
 $route['404_override'] = '';
 $route['translate_uri_dashes'] = FALSE;
 $route['start'] = 'home/index';
+$route['new_form'] = 'home/create_form';
+$route['title_desc'] = 'home/title';
 
 

application/controllers/Form.php

@@ -0,0 +1,22 @@
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
+
+class Form extends CI_Controller {
+
+    public function __construct() {
+        parent::__construct();
+        $this->load->model('Form_model');
+    }
+
+    public function submit() {
+        $form_data = json_decode($this->input->raw_input_stream, true);
+
+        if ($this->Form_model->save_form($form_data)) {
+            $response = array('status' => 'success', 'message' => 'Form submitted successfully.');
+        } else {
+            $response = array('status' => 'error', 'message' => 'Error submitting form.');
+        }
+
+        echo json_encode($response);
+    }
+}

application/controllers/Home.php

@@ -34,7 +34,13 @@ class Home extends CI_Controller
 		$this->load->view('templates/footer');
 }
 
-public function create_form(){
+public function design_form(){
 	$this->load->view('templates/forms_ui');
 }
+public function title(){
+	$this->load->view('templates/header');
+	$this->load->view('templates/form_title');
+	$this->load->view('templates/footer');
+
+}
 }

application/controllers/New_form.php

@@ -0,0 +1,32 @@
+<?php
+class New_form extends CI_Controller
+{
+    public function create_form()
+    {
+        $data['title'] = 'Form Details';
+        $this->form_validation->set_rules('title', 'Title', 'required');
+        $this->form_validation->set_rules('description', 'Description', 'required');
+
+
+        if ($this->form_validation->run() === FALSE) {
+            $this->load->view('templates/header');
+            $this->load->view('templates/form_title',$data);
+            $this->load->view('templates/footer');
+        } else {
+            // $enc_password = md5($this->input->post('password'));
+            $this->load->model('create_model');
+    // $user_id = $this->session->userdata('user_id');
+
+
+            $this->create_model->details();
+            // $this->user_model->register();
+
+
+            // $this->session->set_flashdata('user_registered', 'You are now registered and can log in');
+            redirect('home/design_form');
+        }
+
+    }
+}
+
+?>

application/controllers/Users.php

@@ -27,8 +27,14 @@ class Users extends CI_Controller
         }
 
     }
-    //login user
 
+
+/**
+ * function to login into google forms
+ * @param  null
+ * @return mixed(data return type)
+ * @author torun
+ */
     public function login()
     {
         $data['title'] = 'Sign In';
@@ -48,22 +54,24 @@ class Users extends CI_Controller
             $password = md5($this->input->post('password'));
             $this->load->model('user_model');
             // Login user
-            $user_id = $this->user_model->login($username, $password);
+            $person_id = $this->user_model->login($username, $password);
 
-            if ($user_id) {
+            if ($person_id) {
                 // Create session
                 $user_data = array(
-                    'user_id' => $user_id,
+                    'user_id' => $person_id,
                     'username' => $username,
                     'logged_in' => true
                 );
 
                 $this->session->set_userdata($user_data);
+                $person_id = $this->session->userdata('user_id');
+
 
                 // Set message
                 $this->session->set_flashdata('user_loggedin', 'You are now logged in');
 
-                redirect('start');
+                redirect('title_desc');
             } else {
                 // Set message
                 $this->session->set_flashdata('login_failed', 'Login is invalid');

application/controllers/Your_controller.php

@@ -0,0 +1,20 @@
+<?php
+defined('BASEPATH') or exit('No direct script access allowed');
+
+class Your_controller extends CI_Controller
+{
+
+public function getFormId()
+{
+    // Check if user is logged in and get user_id from session
+    $user_id = $this->session->userdata('user_id');
+
+    // Query to fetch form_id from database based on user_id
+    $form_id = $this->your_model->getFormIdByUserId($user_id); // Replace with your actual model method
+
+    // Return form_id as JSON response
+    $this->output
+         ->set_content_type('application/json')
+         ->set_output(json_encode(array('form_id' => $form_id)));
+}
+}

application/models/Create_model.php

@@ -0,0 +1,24 @@
+
+<?php
+defined('BASEPATH') or exit('No direct script access allowed');
+
+class Create_model extends CI_Model
+{
+    public function details()
+    {
+        // Retrieve user_id from session
+        $user_id = $this->session->userdata('user_id');
+
+        // Prepare data to insert into forms table
+        $data = array(
+            'user_id' => $user_id,
+            'title' => $this->input->post('title'),
+            'description' => $this->input->post('description')
+        );
+
+        // Insert data into forms table
+        $this->db->insert('forms', $data);
+    }
+}
+
+?>

application/models/Form_model.php

@@ -0,0 +1,40 @@
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
+
+class Form_model extends CI_Model {
+
+    public function save_form($form_data) {
+        $this->db->trans_start();
+
+        foreach ($form_data as $section) {
+            $question_data = array(
+                'form_id' => $section['form_id'],
+                'text' => $section['text'],
+                'type' => $section['type'],
+                'required' => $section['required'],
+                'created_at' => date('Y-m-d H:i:s')
+            );
+
+            $this->db->insert('questions', $question_data);
+            $question_id = $this->db->insert_id();
+
+            foreach ($section['options'] as $option_text) {
+                $option_data = array(
+                    'question_id' => $question_id,
+                    'text' => $option_text,
+                    'created_at' => date('Y-m-d H:i:s')
+                );
+
+                $this->db->insert('options', $option_data);
+            }
+        }
+
+        $this->db->trans_complete();
+
+        if ($this->db->trans_status() === FALSE) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+}

application/models/Your_model.php

@@ -0,0 +1,19 @@
+
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
+
+class Your_model extends CI_Model {
+public function getFormIdByUserId($user_id)
+{
+    $this->db->select('form_id');
+    $this->db->where('user_id', $user_id);
+    $query = $this->db->get('forms'); // Replace 'your_forms_table' with your actual table name
+
+    if ($query->num_rows() > 0) {
+        $row = $query->row();
+        return $row->form_id;
+    } else {
+        return null; // Handle case when form_id is not found
+    }
+}
+}

application/views/templates/form_title.php

@@ -0,0 +1,19 @@
+<?php echo form_open('new_form/create_form'); ?>
+<div class="row">
+<div class="col-md-4 col-md-offset-4">
+<h1 class="text-center">
+    <?php echo('Form Details'); ?>
+</h1>
+<div class="form-group">
+
+<input type = "text" name ="title" class="form-control" placeholder = "Title" required autofocus>
+</div>
+<div class="form-group">
+<input type = "text" name ="description" class="form-control" placeholder = "Form Description" required autofocus>
+
+</div>
+<button type = "submit" class = "btn btn-primary btn-block">Create</button>
+</div>
+</div>
+        
+<?php echo form_close(); ?>

application/views/templates/forms2.txt

@@ -1,280 +1,46 @@
-To achieve the functionality where the form data is submitted and stored in the database using CodeIgniter, we need to set up the necessary controllers, models, and views. Below is a detailed guide on how to implement this.
+**********MODEL****************
 
-### Step 1: Update JavaScript (scripts.js)
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
 
-The JavaScript file will handle form interactions and prepare data for submission to the server.
+class Form_model extends CI_Model {
 
-```javascript
+    public function save_form($form_data) {
-$(document).ready(function() {
+        $this->db->trans_start();
-    let index = 1;
-    let activeSection = null;
 
-    // Function to add an option based on type
+        foreach ($form_data as $section) {
-    function addOption(type, container) {
+            $question_data = array(
-        let optionIndex = container.children().length + 1;
+                'form_id' => $section['form_id'],
-        let optionHtml;
+                'text' => $section['text'],
-        if (type === 'multiple-choice' || type === 'checkboxes') {
+                'type' => $section['type'],
-            optionHtml = `
+                'required' => $section['required'],
-                <div class="option">
+                'created_at' => date('Y-m-d H:i:s')
-                    <input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
+            );
-                    <input type="text" class="form-control option-label" value="Option ${optionIndex}">
-                    <span class="delete-option-icon">&times;</span>
-                </div>
-            `;
-        } else if (type === 'dropdown') {
-            optionHtml = `
-                <div class="option">
-                    <input type="text" class="form-control option-label" value="Option ${optionIndex}">
-                    <span class="delete-option-icon">&times;</span>
-                </div>
-            `;
-        }
-        container.append(optionHtml);
-    }
 
-    // Function to create a new form section
+            $this->db->insert('questions', $question_data);
-    function createFormSection() {
+            $question_id = $this->db->insert_id();
-        let newSection = `
-            <div class="form-section" data-index="${index}">
-                <div class="header-row">
-                    ${index === 1 ? '<div class="violet-border"></div>' : ''}
-                    <textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
-                    <select class="custom-select">
-                        <option value="short-answer">Short Answer</option>
-                        <option value="paragraph">Paragraph</option>
-                        <option value="multiple-choice">Multiple Choice</option>
-                        <option value="checkboxes">Checkboxes</option>
-                        <option value="dropdown">Dropdown</option>
-                    </select>
-                    <label class="toggle-switch">
-                        <input type="checkbox" class="required-toggle">
-                        <span class="slider"></span>
-                    </label>
-                    <span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
-                </div>
-                <div class="options-container"></div>
-            </div>
-        `;
-        $('#form-container').append(newSection);
-        index++;
-        positionAddSectionButton();
-    }
 
-    // Position the "Add Section" button dynamically
+            foreach ($section['options'] as $option_text) {
-    function positionAddSectionButton() {
+                $option_data = array(
-        if (activeSection) {
+                    'question_id' => $question_id,
-            let position = activeSection.position();
+                    'text' => $option_text,
-            let buttonWidth = $('#add-section-btn').outerWidth();
+                    'created_at' => date('Y-m-d H:i:s')
-            let buttonHeight = $('#add-section-btn').outerHeight();
+                );
 
-            $('#add-section-btn').css({
+                $this->db->insert('options', $option_data);
-                position: 'absolute',
-                left: position.left - buttonWidth - 47 + 'px',
-                top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
-            });
             }
         }
 
-    // Event listener for "Add Section" button
+        $this->db->trans_complete();
-    $('#add-section-btn').on('click', function() {
-        createFormSection();
-        $('.form-section').removeClass('active');
-        activeSection = $('.form-section').last();
-        activeSection.addClass('active');
-        positionAddSectionButton();
-    });
 
-    // Event listener for changing question type
+        if ($this->db->trans_status() === FALSE) {
-    $(document).on('change', '.custom-select', function() {
+            return false;
-        let type = $(this).val();
-        let container = $(this).closest('.form-section').find('.options-container');
-        container.empty();
-
-        $(this).closest('.form-section').find('.add-option-btn').remove();
-
-        if (type === 'short-answer') {
-            container.append('<input type="text" class="form-control" disabled placeholder="Short answer text">');
-        } else if (type === 'paragraph') {
-            container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
         } else {
-            addOption(type, container);
+            return true;
-            $(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
         }
-    });
-
-    // Event listener for adding an option
-    $(document).on('click', '.add-option-btn', function() {
-        let type = $(this).closest('.form-section').find('.custom-select').val();
-        let container = $(this).closest('.form-section').find('.options-container');
-        addOption(type, container);
-    });
-
-    // Event listener for deleting a section
-    $(document).on('click', '.delete-section-icon', function() {
-        let section = $(this).closest('.form-section');
-        let prevSection = section.prev('.form-section');
-        let nextSection = section.next('.form-section');
-        section.remove();
-        if (section.hasClass('active')) {
-            activeSection = null;
     }
-        if (prevSection.length > 0) {
-            prevSection.find('.delete-section-icon').appendTo(prevSection.find('.form-section'));
-            activeSection = prevSection;
-        } else if (nextSection.length > 0) {
-            nextSection.find('.delete-section-icon').appendTo(nextSection.find('.form-header'));
-            activeSection = nextSection;
 }
-        positionAddSectionButton();
+********************Controller**********************
-    });
-
-    // Event listener for deleting an option
-    $(document).on('click', '.delete-option-icon', function() {
-        $(this).closest('.option').remove();
-    });
-
-    // Event listener for required toggle button
-    $(document).on('click', '.required-toggle', function() {
-        $(this).closest('.form-section').toggleClass('required');
-    });
-
-    // Event listener for preview button
-    $('#preview-btn').on('click', function() {
-        let previewWindow = window.open('', '_blank');
-        let previewContent = `
-            <html>
-            <head>
-                <title>Form Preview</title>
-                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-                <style>
-                    body { background-color: rgb(240, 235, 248); }
-                    .container { margin-top: 30px; }
-                    .form-section {background-color: white;width: 56%;margin-bottom: 30px;margin-left: 240px;padding: 20px;position: relative;align-items: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
-                    .form-header {background-color: white;padding: 20px;margin-bottom: 10px;margin-left: 240px;border-radius: 10px 10px 0 0;display: flex;justify-content: space-between;align-items: center; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-top: 10px solid rgb(103, 58, 183);width: 56%; }
-                    .form-section h2 { text-align: center; margin-bottom: 30px; }
-                    .form-section .question-section { margin-bottom: 20px; } /* Add margin-bottom to the question section */
-                </style>
-            </head>
-            <body>
-                <div class="container">
-                    <div class="form-header">
-                        <h2>Untitled Form</h2>
-                    </div>
-        `;
-        $('.form-section').each(function() {
-            previewContent += '<div class="form-section">';
-            previewContent += '<div class="question-section">';
-            previewContent += '<textarea class="form-control question-label" disabled>' + $(this).find('.untitled-question').val() + '</textarea>';
-            previewContent += '</div>';
-            let type = $(this).find('.custom-select').val();
-            let optionsContainer = $(this).find('.options-container');
-
-            if (type === 'multiple-choice') {
-                optionsContainer.find('.option').each(function() {
-                    previewContent += `
-                        <div class="option">
-                            <input type="radio" name="option-${index}">
-                            <label>${$(this).find('.option-label').val()}</label>
-                        </div>
-                    `;
-                });
-            } else if (type === 'checkboxes') {
-                optionsContainer.find('.option').each(function() {
-                    previewContent += `
-                        <div class="option">
-                            <input type="checkbox">
-                            <label>${$(this).find('.option-label').val()}</label>
-                        </div>
-                    `;
-                });
-            } else if (type === 'short-answer') {
-                previewContent += '<input type="text" class="form-control" placeholder="Short answer text">';
-            } else if (type === 'paragraph') {
-                previewContent += '<textarea class="form-control" placeholder="Paragraph text"></textarea>';
-            } else if (type === 'dropdown') {
-                let dropdownHtml = '<select class="form-control">';
-                optionsContainer.find('.option .option-label').each(function() {
-                    dropdownHtml += `<option>${$(this).val()}</option>`;
-                });
-                dropdownHtml += '</select>';
-                previewContent += dropdownHtml;
-            }
-            previewContent += '</div>';
-        });
-        previewContent += `
-                    <button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
-                </div>
-            </body>
-            </html>
-        `;
-        previewWindow.document.write(previewContent);
-        previewWindow.document.close();
-    });
-
-    // Event listener for clicking on a form section
-
-
-    $(document).on('click', '.form-section', function() {
-        $('.form-section').removeClass('active');
-        $(this).addClass('active');
-        activeSection = $(this);
-        positionAddSectionButton();
-    });
-
-    // Submit button click event to save data to the database
-    $(document).on('click', '#submit-btn', function() {
-        let formData = [];
-
-        // Iterate through each form section
-        $('.form-section').each(function() {
-            let sectionData = {
-                question: $(this).find('.untitled-question').val(),
-                type: $(this).find('.custom-select').val(),
-                required: $(this).find('.required-toggle').prop('checked') ? 1 : 0,
-                options: []
-            };
-
-            // Iterate through options if any
-            $(this).find('.option').each(function() {
-                sectionData.options.push($(this).find('.option-label').val());
-            });
-
-            formData.push(sectionData);
-        });
-
-        // Ajax call to submit data
-        $.ajax({
-            url: "<?php echo base_url('form/submit_form_data'); ?>",
-            type: "POST",
-            data: {
-                formData: formData
-            },
-            success: function(response) {
-                alert(response); // Handle response from server
-            }
-        });
-    });
-
-    // Initialize sortable feature for form sections
-    $('#form-container').sortable({
-        placeholder: 'ui-state-highlight',
-        start: function (event, ui) {
-            ui.placeholder.height(ui.item.height());
-        },
-        stop: function (event, ui) {
-            positionAddSectionButton();
-        }
-    });
-
-    $('#form-container').disableSelection();
-});
-```
-
-### Step 2: Create Controllers and Models in CodeIgniter
-
-#### 1. Controller: Form.php
-
-```php
 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
@@ -285,88 +51,24 @@ class Form extends CI_Controller {
         $this->load->model('Form_model');
     }
 
-    public function index() {
+    public function submit() {
-        // Load view for form creation
+        $form_data = json_decode($this->input->raw_input_stream, true);
-        $this->load->view('create_form');
+
+        if ($this->Form_model->save_form($form_data)) {
+            $response = array('status' => 'success', 'message' => 'Form submitted successfully.');
+        } else {
+            $response = array('status' => 'error', 'message' => 'Error submitting form.');
         }
 
-    public function submit_form_data() {
+        echo json_encode($response);
-        $formData = $this->input->post('formData');
-
-        // Example to get user ID (you should have this implemented in your authentication flow)
-        $userId = 1; // Replace with your actual user ID retrieval logic
-
-        // Insert form data into database using model
-        foreach ($formData as $section) {
-            $formId = $this->Form_model->insert_form($userId, $section['question']);
-
-            // Insert questions into database
-            $this->Form_model->insert_question($formId, $section['type'], $section['required']);
-
-            // Insert options into database if any
-            if (!empty($section['options'])) {
-                foreach ($section['options'] as $option) {
-                    $this->Form_model->insert_option($formId, $option);
     }
 }
-        }
+***********UPDATED HTML*************************
-
+### Updated HTML
-        echo "Form data submitted successfully!";
-    }
-}
-?>
-```
-
-#### 2. Model: Form_model.php
-
-```php
-<?php
-defined('BASEPATH') OR exit('No direct script access allowed');
-
-class Form_model extends CI_Model {
-
-    public function insert_form($userId, $description) {
-        // Insert form data and return form ID
-        $data = array(
-            'user_id' => $userId,
-            'description' => $description,
-            'created_at' => date('Y-m-d H:i:s')
-        );
-        $this->db->insert('forms', $data);
-        return $this->db->insert_id();
-    }
-
-    public function insert_question($formId, $type, $required) {
-        // Insert question data
-        $data = array(
-            'form_id' => $formId,
-            'type' => $type,
-            'required' => $required,
-            'created_at' => date('Y-m-d H:i:s')
-        );
-        $this->db->insert('questions', $data);
-    }
-
-    public function insert_option($formId, $text) {
-        // Insert option data
-        $data = array(
-            'question_id' => $formId, // Assuming form ID here, adjust as per your structure
-            'text' => $text
-        );
-        $this->db->insert('options', $data);
-    }
-
-}
-?>
-```
-
-### Step 3: Create Views
-
-#### 1. create_form.php (View for form creation)
-
 ```html
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -399,8 +101,8 @@ class Form_model extends CI_Model {
         }
     </style>
 </head>
+
 <body>
-    <!-- Navigation Bar -->
     <nav class="navbar navbar-inverse navbar-custom">
         <div class="container">
             <div class="navbar-header">
@@ -416,7 +118,6 @@ class Form_model extends CI_Model {
         </div>
     </nav>
 
-    <!-- Form Creation Section -->
     <div class="container">
         <div class="form-header">
             <button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
@@ -424,35 +125,196 @@ class Form_model extends CI_Model {
             <button id="add-section-btn" class="btn btn-primary">+</button>
         </div>
         <div id="form-container"></div>
-        <button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
+
+        <input type="hidden" id="form-id" value="YOUR_FORM_ID"> <!-- Ensure to set the form ID dynamically -->
+        <button id="submit-btn" class="btn btn-success">Submit</button>
     </div>
 
-    <!-- JavaScript files -->
     <script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
+    <script>
+        $(document).ready(function() {
+            $('#add-section-btn').on('click', function() {
+                let newSection = `
+                    <div class="form-section">
+                        <input type="text" class="untitled-question" placeholder="Untitled Question">
+                        <select class="custom-select">
+                            <option value="text">Text</option>
+                            <option value="multiple_choice">Multiple Choice</option>
+                        </select>
+                        <input type="checkbox" class="required-toggle"> Required
+                        <div class="options-container">
+                            <button class="add-option-btn btn btn-secondary">Add Option</button>
+                        </div>
+                    </div>`;
+                $('#form-container').append(newSection);
+            });
+
+            $(document).on('click', '.add-option-btn', function() {
+                let optionInput = '<input type="text" class="option-label" placeholder="Option">';
+                $(this).before(optionInput);
+            });
+
+            $('#submit-btn').on('click', function() {
+                let formData = collectFormData();
+
+                $.ajax({
+                    url: '<?php echo base_url(); ?>form/submit',
+                    type: 'POST',
+                    data: JSON.stringify(formData),
+                    contentType: 'application/json; charset=utf-8',
+                    dataType: 'json',
+                    success: function(response) {
+                        alert('Form submitted successfully!');
+                        console.log(response);
+                    },
+                    error: function(error) {
+                        alert('Error submitting form!');
+                        console.log(error);
+                    }
+                });
+            });
+
+            function collectFormData() {
+                let formData = [];
+                let formId = $('#form-id').val();
+
+                $('.form-section').each(function() {
+                    let questionText = $(this).find('.untitled-question').val();
+                    let type = $(this).find('.custom-select').val();
+                    let required = $(this).find('.required-toggle').is(':checked');
+                    let options = [];
+
+                    $(this).find('.option-label').each(function() {
+                        options.push($(this).val());
+                    });
+
+                    formData.push({
+                        form_id: formId,
+                        text: questionText,
+                        type: type,
+                        required: required,
+                        options: options
+                    });
+                });
+
+                return formData;
+            }
+        });
+    </script>
 </body>
+
 </html>
-```
 
-### Step 4: Database Structure
 
-Ensure your database tables (`users`, `forms`, `questions`, `options`) are set up according to your described structure:
 
-- `users` table: id (primary key), username, email, password, created_at
+*************************************88*************************
-- `forms` table: id (primary key), user_id (foreign key to users.id), description, created_at
+new Controller
-- `questions` table: id (primary key), form_id (foreign key to forms.id), text, type, required, created_at
+<?php
-- `options` table: id (primary key), question_id (foreign key to questions.id), text
+defined('BASEPATH') OR exit('No direct script access allowed');
 
-### Step 5: Configure CodeIgniter
+class Questions extends CI_Controller {
 
-Ensure your CodeIgniter configuration (`config/config.php` and `config/database.php`) is set up correctly with base URL, database connection settings, and any other necessary configurations.
+    public function __construct() {
+        parent::__construct();
+        // Load necessary models and libraries here
+        $this->load->model('Form_model'); // Load your Form_model
+    }
 
-### Step 6: Testing
+    public function save() {
+        // Handle AJAX post data
+        $form_data = $this->input->post('form_data'); // Assuming your AJAX post sends 'form_data'
 
-- Access the form creation page (`http://yourdomain.com/form`) and create a form.
+        if (!empty($form_data)) {
-- Click on the "Submit" button to save the form data.
+            foreach ($form_data as $section) {
-- Verify that the data is correctly saved in your database tables.
+                $question_data = array(
+                    'form_id' => $section['form_id'],
+                    'text' => $section['text'],
+                    'type' => $section['type'],
+                    'required' => $section['required'],
+                    'created_at' => date('Y-m-d H:i:s')
+                );
 
-This setup assumes you have basic knowledge of CodeIgniter and have configured your environment correctly. Adjust paths (`base_url()`) and database configurations as per your setup.
+                $question_id = $this->Form_model->save_question($question_data);
+
+                // Save options for this question
+                foreach ($section['options'] as $option_text) {
+                    $option_data = array(
+                        'question_id' => $question_id,
+                        'text' => $option_text,
+                        'created_at' => date('Y-m-d H:i:s')
+                    );
+
+                    $this->Form_model->save_option($option_data);
+                }
+            }
+
+            echo json_encode(array('success' => true));
+        } else {
+            echo json_encode(array('success' => false));
+        }
+    }
+
+}
+******************************newMODEL**********
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
+
+class Form_model extends CI_Model {
+
+    public function save_question($question_data) {
+        $this->db->insert('questions', $question_data);
+        return $this->db->insert_id();
+    }
+
+    public function save_option($option_data) {
+        $this->db->insert('options', $option_data);
+    }
+
+}
+******************JAVASCRIPT************updatead
+function collectFormData() {
+    let formData = [];
+    let formId = $('#form-id').val();
+
+    $('.form-section').each(function() {
+        let questionText = $(this).find('.untitled-question').val();
+        let type = $(this).find('.custom-select').val();
+        let required = $(this).find('.required-toggle').is(':checked');
+        let options = [];
+
+        $(this).find('.option-label').each(function() {
+            options.push($(this).val());
+        });
+
+        formData.push({
+            form_id: formId,
+            text: questionText,
+            type: type,
+            required: required,
+            options: options
+        });
+    });
+
+    $.ajax({
+        url: 'Questions/save', // Endpoint to handle saving questions
+        type: 'POST',
+        dataType: 'json',
+        data: { form_data: formData },
+        success: function(response) {
+            if (response.success) {
+                alert('Form data saved successfully!');
+                // Handle success actions
+            } else {
+                alert('Failed to save form data.');
+                // Handle failure actions
+            }
+        },
+        error: function(xhr, status, error) {
+            alert('Error: ' + error);
+            // Handle error actions
+        }
+    });
+}

application/views/templates/forms_ui.php

@@ -18,19 +18,18 @@
 
         .navbar-custom .navbar-brand {
             color: white;
-            font-size: 18px; /* Adjust font size for navbar links */
+            font-size: 18px;
         }
 
         .navbar-custom .navbar-nav>li>a {
             color: white;
-            font-size: 16px; /* Adjust font size for navbar links */
+            font-size: 16px;
         }
 
-        /* Additional styling for submit button */
         #submit-btn {
             margin-top: 20px;
-            float: left; /* Align button to the left */
+            float: left;
-            clear: both; /* Clear float to ensure proper layout */
+            clear: both;
         }
     </style>
 </head>
@@ -59,14 +58,15 @@
         </div>
         <div id="form-container"></div>
 
-        <!-- Submit button -->
+        <button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
-        <button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
+
     </div>
 
     <script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
     <script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
+    
 </body>
 
 </html>

application/views/templates/header.php

@@ -29,7 +29,7 @@
                         <li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
                     <?php endif; ?>
                     <?php if ($this->session->userdata('logged_in')): ?>
-                        <li><a href="<?php echo base_url(); ?>home/create_form">Create Form</a></li>
+                        <li><a href="<?php echo base_url(); ?>home/design_form">Create Form</a></li>
                         <li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
 
                     <?php endif; ?>

assets/css/styles.css

@@ -7,7 +7,20 @@ body {
     position: relative;
     margin-top: 30px;
 }
-
+.form_container_top{
+    box-sizing: border-box;
+    margin-top: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 100%;
+    width: 100%;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #f4f4f9;
+    color: black;
+    height: 20px;
+  }
 /* Form header styles */
 .form-header {
     background-color: white;

assets/js/scripts.js

@@ -210,6 +210,7 @@ K    });
         previewWindow.document.close();
     });
 
+
     // Activate the section;repositions add section button
     $(document).on('click', '.form-section', function() {
         $('.form-section').removeClass('active');
@@ -228,5 +229,52 @@ K    });
         }
     });
 
+    $('#submit-btn').on('click', function() {
+        let formData = collectFormData();
+
+        $.ajax({
+            url: '<?php echo base_url(); ?>form/submit',
+            type: 'POST',
+            data: JSON.stringify(formData),
+            contentType: 'application/json; charset=utf-8',
+            dataType: 'json',
+            success: function(response) {
+                alert('Form submitted successfully!');
+                console.log(response);
+            },
+            error: function(error) {
+                alert('Error submitting form!');
+                console.log(error);
+            }
+        });
+    });
+
+    function collectFormData() {
+        let formData = [];
+
+        // let formId = $('#form-id').val();
+
+        $('.form-section').each(function() {
+            let questionText = $(this).find('.untitled-question').val();
+            let type = $(this).find('.custom-select').val();
+            let required = $(this).find('.required-toggle').is(':checked');
+            let options = [];
+
+            $(this).find('.option-label').each(function() {
+                options.push($(this).val());
+            });
+
+            formData.push({
+                // form_id: formId,
+                text: questionText,
+                type: type,
+                required: required,
+                options: options
+            });
+        });
+
+        return formData;
+    }
+
     $('#form-container').disableSelection();
 });