diff --git a/application/views/templates/forms2.txt b/application/views/templates/forms2.txt new file mode 100644 index 0000000..badaaed --- /dev/null +++ b/application/views/templates/forms2.txt @@ -0,0 +1,458 @@ +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. + +### Step 1: Update JavaScript (scripts.js) + +The JavaScript file will handle form interactions and prepare data for submission to the server. + +```javascript +$(document).ready(function() { + let index = 1; + let activeSection = null; + + // Function to add an option based on type + function addOption(type, container) { + let optionIndex = container.children().length + 1; + let optionHtml; + if (type === 'multiple-choice' || type === 'checkboxes') { + optionHtml = ` +
+ + + × +
+ `; + } else if (type === 'dropdown') { + optionHtml = ` +
+ + × +
+ `; + } + container.append(optionHtml); + } + + // Function to create a new form section + function createFormSection() { + let newSection = ` +
+
+ ${index === 1 ? '
' : ''} + + + + +
+
+
+ `; + $('#form-container').append(newSection); + index++; + positionAddSectionButton(); + } + + // Position the "Add Section" button dynamically + function positionAddSectionButton() { + if (activeSection) { + let position = activeSection.position(); + let buttonWidth = $('#add-section-btn').outerWidth(); + let buttonHeight = $('#add-section-btn').outerHeight(); + + $('#add-section-btn').css({ + position: 'absolute', + left: position.left - buttonWidth - 47 + 'px', + top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px' + }); + } + } + + // Event listener for "Add Section" button + $('#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 + $(document).on('change', '.custom-select', function() { + 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(''); + } else if (type === 'paragraph') { + container.append(''); + } else { + addOption(type, container); + $(this).closest('.form-section').append(''); + } + }); + + // 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(); + }); + + // 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 = ` + + + Form Preview + + + + +
+
+

Untitled Form

+
+ `; + $('.form-section').each(function() { + previewContent += '
'; + previewContent += '
'; + previewContent += ''; + previewContent += '
'; + let type = $(this).find('.custom-select').val(); + let optionsContainer = $(this).find('.options-container'); + + if (type === 'multiple-choice') { + optionsContainer.find('.option').each(function() { + previewContent += ` +
+ + +
+ `; + }); + } else if (type === 'checkboxes') { + optionsContainer.find('.option').each(function() { + previewContent += ` +
+ + +
+ `; + }); + } else if (type === 'short-answer') { + previewContent += ''; + } else if (type === 'paragraph') { + previewContent += ''; + } else if (type === 'dropdown') { + let dropdownHtml = ''; + previewContent += dropdownHtml; + } + previewContent += '
'; + }); + previewContent += ` + +
+ + + `; + 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: "", + 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 +load->model('Form_model'); + } + + public function index() { + // Load view for form creation + $this->load->view('create_form'); + } + + public function submit_form_data() { + $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); + } + } + } + + echo "Form data submitted successfully!"; + } +} +?> +``` + +#### 2. Model: Form_model.php + +```php + $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 + + + + + + Google Form Clone + + + + + + + + + + + +
+
+ +

Untitled Form

+ +
+
+ +
+ + + + + + + + +``` + +### 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 +- `forms` table: id (primary key), user_id (foreign key to users.id), description, created_at +- `questions` table: id (primary key), form_id (foreign key to forms.id), text, type, required, created_at +- `options` table: id (primary key), question_id (foreign key to questions.id), text + +### Step 5: Configure CodeIgniter + +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. + +### Step 6: Testing + +- Access the form creation page (`http://yourdomain.com/form`) and create a form. +- Click on the "Submit" button to save the form data. +- Verify that the data is correctly saved in your database tables. + +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. \ No newline at end of file